Question

我想将文本输入放在与提交按钮相同的行和高度上。请参阅JSFiddle。在Chrome中，这可以完美无缺，但在Firefox中，提交按钮低于文本输入。我该如何解决。 HTML

<div id="whois-lookup">
    <form id="whois-form">
        <input type="text" placeholder="search" id="name-check" />
        <input type="submit" name="query" />
    </form>
</div>

和css

#whois-lookup input[type=text]
    {
        margin: 0;
        border: 1px solid #aaa;
        border-right: 0px;
        font-size: 1.0em;
        line-height: 25px;
        height: 25px;
        padding: 0 10px;
        width: 188px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        position: relative;
        top: -2px;
    }

    #whois-lookup input[type=text]:focus
    {
        outline: none;
    }

    #whois-lookup input[type=submit]
    {
        margin-left: -4px;
        border: 1px solid #aaa;
        border-left: 0px;
        font-size: 1.0em;
        line-height: 27px;
        height: 27px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        color: #666;
        cursor: pointer;
        background-color: #fff;
    }

Answer 1

如前所述（请参阅CBroe的评论），您只需要以下CSS，请参阅嵌入式评论：

#whois-lookup
{
    top: 0;   /** Don't need top/right, no effect for static positioning **/
    right: 0;
}


#whois-lookup input[type=text]
{
    margin: 0;
    border: 1px solid #aaa;
    border-right: 0px;
    font-size: 1.0em;
    line-height: 25px;
    height: 25px;
    padding: 0 10px;
    width: 188px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    position: relative; /** Not needed relative/top **/
    top: -2px; 
    vertical-align: bottom; /** top will also work... **/
}

#whois-lookup input[type=text]:focus
{
    outline: none;
}

#whois-lookup input[type=submit]
{
    margin-left: -4px;
    border: 1px solid #aaa;
    border-left: 0px;
    font-size: 1.0em;
    line-height: 27px;
    height: 27px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #666;
    cursor: pointer;
    background-color: #fff;
    vertical-align: bottom; /** top will also work... **/
}

您为输入文本和输入提交元素设置了两个不同的行高和高度，并非完全明显但似乎有效。

小提琴：http://jsfiddle.net/audetwebdesign/WVG9L/17/

设置输入文本和输入提交在同一高度的问题

1 个答案: