对齐html输入并提交

Question

我有一个荒谬的问题，我的输入文本字段和提交按钮没有排队，我真的无法弄清楚如何解决它的优雅解决方案。如下图所示，输入文本字段（右上角标有“输入关键字”）比“搜索”提交按钮高2px：

这是HTML：

<div id="search">
    <form action="#" method="POST" id="search_form">
        <div id="search_inputs">
            <input type="text" placeholder="Enter Keywords" name="keywords" />
            <input class="button" type="submit" name="search" value="SEARCH" />
        </div>
    </form>
</div>

这是css代码：

#search_form .button {
    background: black;
    color: white;
    padding: 3px 15px;
    border: none;
    font-size: 7pt;
    height: 18px;
}

#search_form input[name="keywords"] {
    width: 175px;
}

#search {
    margin-top: 7px;
    float: right;
}

我很确定将字体大小设置为7pt会弄乱它，但我不知道为什么而且我不知道如何处理这个因为那是我区域中其他按钮的字体大小

感谢您的帮助！

Answer 1

在float: left;样式中添加#search_form input[name="keywords"]样式正确对齐它们的顶部，然后添加一些margin-right应该让你好好去。

Fiddle

问题源于搜索按钮上的float: right。输入框有一个自然display: inline-block，导致轻微下降。通常当你向右浮动时，修复就是在DOM中向上移动该元素。在这种情况下，这不起作用。通过将输入更改为浮动元素，您还强制它为display: inline。

虽然我不确定为什么你不能只为元素添加display: inline。