css 搜索内的按钮

qyuhtwio 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(184)

如何强制我的按钮显示在输入上？它想转到第二行：

我想要的：

输入宽度应为100%。

input {
  width: 100%;
  border-radius:30px;
  padding-right:50px;
}

button {
  border-radius:30px;
  margin-left:-50px;
}

<div>
<input type="text" placeholder="search for something"/>
<button>search</button>
</div>

css

来源：https://stackoverflow.com/questions/76332597/button-inside-the-search

1条答案

按热度按时间

gojuced71#

给予contaienr（div）一个position: relative，然后将按钮绝对定位：

div {
  position: relative;
}

input {
  width: 100%;
  border-radius: 30px;
  padding-right: 4em;
}

button {
  border-radius:30px;
  position: absolute;
  top: 0;
  right: 0;
}

<div>
  <input type="text" placeholder="search for something"/>
  <button>search</button>
</div>

PS：不要忘记为输入设置一个padding-right，以将输入文本偏移到按钮宽度。

赞(0）回复(0）举报 2023-05-30

我来回答

css 搜索内的按钮

1条答案

相关问题

热门标签

最新问答