Question

我正在研究网站的标题，我的搜索选项有问题我添加了input和button标记。
Thoose必须有一个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;
}

FIDDLE

Answer 1

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

输入和按钮并排

1 个答案:

Demo Fiddle

替代