CSS搜索怎么放文本框

在CSS中，可以使用多種方法將文本框放置到頁面的特定位置，以下是一些常見的方法：

1、使用HTML和CSS的position屬性：

HTML代碼：

<div id="search-container">
  <input type="text" id="search-input">
  <button id="search-button">搜索</button>
</div>

CSS代碼：

#search-container {
  position: relative; /* 相對于其***近的定位祖先元素進(jìn)行定位 */
  width: 300px; /* 文本框的寬度 */
  margin: 0 auto; /* 文本居中顯示 */
}
#search-input {
  width: 100%; /* 文本框?qū)挾日紳M整個(gè)容器 */
  height: 30px; /* 文本框高度 */
  border: 1px solid #000; /* 文本框邊框 */
  padding: 5px; /* 文本框內(nèi)邊距 */
}
#search-button {
  position: absolute; /* ***定位，相對于瀏覽器窗口進(jìn)行定位 */
  right: 0; /* 按鈕位于文本框的右側(cè) */
  height: 30px; /* 按鈕高度與文本框一致 */
  border: 1px solid #000; /* 按鈕邊框 */
  background-color: #f0f0f0; /* 按鈕背景顏色 */
}

2、使用CSS的flex布局：

HTML代碼：

<div id="search-container">
  <input type="text" id="search-input">
  <button id="search-button">搜索</button>
</div>

CSS代碼：

#search-container {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 水平居中，并且按鈕位于文本框的右側(cè) */
  width: 300px; /* 文本框的寬度 */
  margin: 0 auto; /* 文本居中顯示 */
}
#search-input {
  width: 100%; /* 文本框?qū)挾日紳M整個(gè)容器 */
  height: 30px; /* 文本框高度 */
  border: 1px solid #000; /* 文本框邊框 */
  padding: 5px; /* 文本框內(nèi)邊距 */
}
#search-button {
  height: 30px; /* 按鈕高度與文本框一致 */
  border: 1px solid #000; /* 按鈕邊框 */
  background-color: #f0f0f0; /* 按鈕背景顏色 */
}

這些方法可以根據(jù)具體的需求和布局進(jìn)行調(diào)整，也可以結(jié)合使用JavaScript來增強(qiáng)搜索功能，如自動(dòng)完成、搜索建議等。