2

我遇到了一个荒谬的问题，我的输入文本字段和提交按钮没有对齐，我真的想不出一个优雅的解决方案来解决它。如下图所示，输入文本字段（右上角标有“输入关键字”）比“搜索”提交按钮高 2px：

输入字段在提交按钮上方 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 会搞砸，但我不知道为什么，也不知道如何处理，因为这是我在该区域中其他按钮的字体大小。

谢谢你的帮助！

4

1 回答 1

3

float: left;在样式中添加 a可以#search_form input[name="keywords"]正确对齐他们的上衣，然后添加一些margin-right应该可以让您顺利进行。

小提琴

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

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

于 2012-04-30T02:26:14.057 回答