设置输入文本和输入的问题在同一高度提交 [英] Problems with setting input text and input submit at same height

问题描述

我想将文本输入放在与提交按钮相同的行和高度上。请参阅 JSFiddle 。在Chrome浏览器中，此功能完美无瑕，但在Firefox中，提交按钮低于文本输入。我该如何解决。
HTML

 < div id =whois-lookup> 
< form id =whois-form> 
< input type =textplaceholder =searchid =name-check/> 
< input type =submitname =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; 
职位：亲属; 
 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-right-right-radius：3px; 
 border-bottom-right-radius：3px; 
颜色：＃666; 
光标：指针; 
 background-color：#fff; 
} 
  

解决方案

评论），您只需要以下CSS，查看嵌入的评论：

 ＃whois-lookup 
 {
 top：0; / **不需要顶部/右侧，静态定位没有效果** / 
右侧：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; 
职位：亲属; / **不需要相对/顶部** / 
顶部：-2px; 
 vertical-align：bottom; / **顶部也将工作... ** / 
} 
 
＃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-right-right-radius：3px; 
 border-bottom-right-radius：3px; 
颜色：＃666; 
光标：指针; 
 background-color：#fff; 
 vertical-align：bottom; / **顶部也会工作... ** / 
} 
  

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

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

I want to put a text input on the same line and height as a submit button. See the JSFiddle. In Chrome this works flawless, but in Firefox the submit button is lower than the text input. How do I fix this. HTML

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

And the 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;
    }

解决方案

As said earlier (see CBroe's comment), you just need the following CSS, see embedded comments:

#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... **/
}

You set two different line-heights and heights for the input text and the input submit elements, not totally obvious but seems to work.

Fiddle: http://jsfiddle.net/audetwebdesign/WVG9L/17/

这篇关于设置输入文本和输入的问题在同一高度提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！