0

誰でも私のコードを調べてもらえますか

<html>
    <div class="box">
        <div class="txtFld">
            <input type="text"/>
        </div>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </div>
</html>

CSS コード:

ul{margin:0;padding:0}
ul li{border-bottom:1px solid #f1f1f1;padding:5px}
.box{width:160px;overflow:auto;border:1px solid #ccc;height:150px}
.txtFld{-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box}
.txtFld input{width:100%;}

水平スクロールバーがクロムやブラウザに表示されます。どこで間違えましたか？

4

6 に答える 6

1

質問が古いことは知っていますが、答えは次のとおりです。

テキスト入力でプロパティを設定する必要がありbox-sizing:border-boxます（あなたがしたように親divではありません）。

JSFiddle で確認してください: http://jsfiddle.net/rE6xW/2/

これは、テキスト入力にデフォルトで padding(2px) と border(1px) があり、幅を 100% に設定すると、100%+2*[padding+border]親よりも 6px 広いため、水平スクロール バーが表示されるためです。box-sizing:border-boxプロパティを設定すると、width:100%プロパティは次のように解釈されます。

100% = 内側の幅 + パディング + ボーダー

これが誰かを助けることを願っています。

.

于 2014-07-10T12:14:40.257 に答える
0

「ボックス」のクラスを持つ要素にスクロールバーが必要ないと仮定すると、オーバーフローを非表示に設定する必要があります。

.box {
  border: 1px solid #CCC;
  height: 15px;
  overflow: hidden;
  width: 150px;
}

水平スクロールバーのみを無効にする場合は、overflow-xをhiddenに設定します。

overflow-x: hidden;

ページ全体に水平スクロールバーを付けたくない場合は、bodyタグにoverflow-xを設定する必要があります。

body { overflow-x: hidden; }
于 2013-02-27T16:12:41.003 に答える
0

テキスト ボックスの幅がプロジェクトの他の場所で上書きされていませんか?

.txtFld input{
  width:100%;
}

提供されたコードからこれを削除すると、IE と Chrome でのみ水平バーが表示されますが、Firefox では正常に動作します。CSS ドキュメントと HTML を再確認してください。

于 2013-02-27T16:14:29.130 に答える
0

その理由は

.txtFld input{width:100%;}

への変更

.txtFld input{width:50%;}

または何でも合う

于 2013-02-27T16:06:17.883 に答える
0

スクロールバーのみを非表示にする必要がある場合は、使用します

.box::-webkit-scrollbar {
    display: none;                                                          
}

クローム用

于 2013-02-27T16:07:12.117 に答える
0

の幅を.txtFldに設定するだけautoです。

.txtFld input {
  width:auto;
}
于 2013-02-27T19:20:34.680 に答える