我正在为一个网站制作标题，但我对搜索选项有疑问。
我包含了一个 input 和一个 button 标签。
他们必须有一个 vertical-align: middle; 并且应该并排。
我尝试了一些方法，但它不起作用。 有人可以解释为什么以及我如何解决这个问题吗？
HTML:
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" />
<button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button>
</div>
CSS:
#main_search {
float: right;
line-height: 60px;
margin: 0 50px 0 0;
}
#main_search_input {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 20px;
line-height: 20px;
width: 200px;
vertical-align: middle;
padding: 5px 10px 5px 10px !important;
}
#search_button {
background-color: #FFF;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 30px;
padding: 5px;
vertical-align: middle;
}
最佳答案
input 和 button 元素是内联元素，因此通过在代码中用换行符分隔它们，这会被有效地解释和呈现为空白字符，从而导致他们之间出现了差距。
要解决这个问题，添加:
input, button{
margin:0;
}
然后从 HTML 中的元素之间删除新行:
Demo Fiddle
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
备选方案
(同样要求不设置边距，如上)
Float the two elements so they push up against one another
Apply a font-size:0 to #main_search so the space has a width of zero
关于html - 输入和按钮并排，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23583298/