2

検索ボックスに問題があります。テキストフィールドとボタンを同じ高さにしようとしていますが、すべてのブラウザで正しく表示できません。コードは次のとおりです：http：//codepen.io/anon/pen/ygCFz。この方法はFirefoxでは正常に機能しますが、Chromeでは機能しません。

では、テキストフィールドとボタンの両方の高さと位置を等しくするための最良の方法は何でしょうか？

ありがとう！

//編集：誰かがさらに参照するためにコードを要求したので、ここにあります：HTML

<form id="search" action="" method="get">
        <input type="text" name="search" class="sfield" value="search and go"/>
        <input type="submit" value="Search" class="sbutton"/>
</form>

CSS

input.sfield{
  background-color:#fff;    
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1em;
    height:26px;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px;
}
4

4 に答える 4

2

入力要素の高さの代わりにパディングを使用します。行の高さは、Firefoxのフォントサイズとまったく同じである必要があります。したがって、フォントサイズを16ピクセルにしたい場合は、行の高さを16ピクセルにし、上下にパディングを追加します。送信ボタンには、絶対位置を使用して、上：0と下：0になるようにします。入力と同等の送信ボタン幅のパディング左を追加するだけで、すべて完了です。

#search {
    position:relative;
    display:inline-block;
}

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1;
    padding:5px;
    display:inline-block;
    padding-right:50px;
}

input.sbutton{
    background-color:#d91515;
    border:none;    
    color:#fff;
    position:absolute;
    top:0px;right:0px;bottom:0px;
    width:50px;
}
于 2012-10-23T21:46:16.697 に答える
1

両方の要素に明確な高さプロパティを設定するか、SbuttonにSfieldからスタイルを継承するように指示することができます。

<input type="submit" value="Search" class="sfield sbutton"/>

また、均等にするために少しパディングを追加します。

http://codepen.io/anon/pen/zBlwD

于 2012-10-23T21:46:58.490 に答える
0

HTML：

<form id="search" action="" method="get">
    <input type="text" name="search" class="sfield" value="search and go"/><input type="submit" value="Search" class="sbutton"/>
</form>

CSS：

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:0.9em;
    height:26px;
    margin: 0;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border: 1px solid #d91515;  
    color:#fff;
    position:relative;
    margin: 0;
    height:30px;
}
于 2012-10-23T21:49:08.307 に答える
0

さて、解決策がこれほど単純ではないことを願っていますが、クラス heightのルールで2回定義しました。sbutton

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1em;
    height:26px;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;  //that's one
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px; //that's two
}

あなたが1つを取り除くときに何が起こるかを見てください。動作するはずです。またline-height、テキストボックスのルールも確認してください。フォントサイズが行の高さと異なる場合は、サイズが異なる理由を説明します。FirefoxとChromeは、emsからピクセルへの変換とその逆の変換を使用します。

于 2012-10-23T21:46:33.143 に答える