html - 对齐 html 输入并提交

Question

我遇到了一个荒谬的问题，我的输入文本字段和提交按钮没有对齐，我真的无法找到一个优雅的解决方案来解决它。如下图所示，输入文本字段(右上角标记为“输入关键字”)比“搜索”提交按钮高 2 像素:

这是 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

向 #search_form input[name="keywords"] 样式添加 float: left; 使其顶部正确对齐，然后添加一些 margin-right 应该能让你顺利开始。

Fiddle

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

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