CSS按鈕如何放置在文本框內(nèi)？

在CSS中，您可以使用相對定位（relative positioning）或***定位（absolute positioning）將按鈕放置在文本框內(nèi)，這里有一個簡單的示例，說明如何實現(xiàn)這一點：

HTML結(jié)構(gòu)：

<div class="text-box">
  <input type="text" class="text-input">
  <button class="text-button">點擊我</button>
</div>

CSS樣式：

.text-box {
  position: relative; /* 相對定位 */
  width: 200px; /* 文本框?qū)挾?*/
  height: 30px; /* 文本框高度 */
  border: 1px solid #000; /* 文本框邊框 */
}
.text-input {
  position: absolute; /* ***定位 */
  top: 0; /* 頂部位置 */
  left: 0; /* 左側(cè)位置 */
  width: 100%; /* 輸入框?qū)挾?*/
  height: 100%; /* 輸入框高度 */
  border: none; /* 輸入框邊框 */
}
.text-button {
  position: absolute; /* ***定位 */
  top: 0; /* 頂部位置 */
  right: 0; /* 右側(cè)位置 */
  width: 50px; /* 按鈕寬度 */
  height: 30px; /* 按鈕高度 */
  border: 1px solid #000; /* 按鈕邊框 */
  background-color: #f0f0f0; /* 按鈕背景色 */
  color: #000; /* 按鈕文字顏色 */
}

在這個示例中，我們創(chuàng)建了一個包含文本框和按鈕的容器（div.text-box），我們使用相對定位（position: relative;）來定位這個容器，我們給文本框（input.text-input）和按鈕（button.text-button）使用***定位（position: absolute;），分別將它們定位在容器的頂部和右側(cè)，這樣，按鈕就會顯示在文本框的右側(cè)，而不會影響到文本框的輸入?yún)^(qū)域，您可以根據(jù)需要調(diào)整這些元素的尺寸和樣式。