設置輸入文本和輸入提交在同一高度的問題

我想將文本輸入與提交按鈕放在同一行和高度。請參閱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; 
    }

來源

2013-04-26 OrangeTux

只需拖放文本輸入的相對定位，並設置'垂直align'爲兩個輸入相同的值。 http://jsfiddle.net/WVG9L/10/ – CBroe 2013-04-26 14:18:46

正如前面所說（見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/

來源

2013-04-26 14:43:30

設置輸入文本和輸入提交在同一高度的問題

回答

相關問題