英文:
Button inside the search
问题
如何强制我的按钮显示在输入框上方？它想要移到第二行：
我想要的效果：
输入框应该占据整个宽度。
英文:
How to force my button to show up over the input? It wants to go to the second line:
What I would like:
The input should be 100% wide.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
input {
width: 100%;
border-radius:30px;
padding-right:50px;
}
button {
border-radius:30px;
margin-left:-50px;
}
<!-- language: lang-html -->
<div>
<input type="text" placeholder="search for something"/>
<button>search</button>
</div>
<!-- end snippet -->
答案1
得分: 1
给容器（div）添加 position: relative，然后将按钮设置为 position: absolute：
div {
position: relative;
}
button {
border-radius: 30px;
position: absolute;
top: 0;
right: 0;
}
不要忘记为输入框设置 padding-right 以将输入文本偏移到按钮的宽度。
英文:
give the contaienr (div) a position: relative and then position the button absolute:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {
position: relative;
}
input {
width: 100%;
border-radius: 30px;
padding-right: 4em;
}
button {
border-radius:30px;
position: absolute;
top: 0;
right: 0;
}
<!-- language: lang-html -->
<div>
<input type="text" placeholder="search for something"/>
<button>search</button>
</div>
<!-- end snippet -->
PS: Don't forget to set a padding-right for the input to offset the input text to the button width.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论