7

このようなHTMLコード：

<div>
    <ol>
        <li class='a'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li class='b'>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
    </ol>
</div>

このようなCSSコード：

div {
    width: 400px;
    overflow-x: scroll
}

.a {
    background-color: red;
}

.b {
    background-color: blue;
}

スクロールバーをスクロールすると、背景色が元のスクロールされていない領域にのみ適用されていることがわかります。どうすればこの問題を解決できますか。

私のコードはここにあります

編集

私の問題を明確に示す別の例。

私は今2番目の問題を抱えています：2番目の行が消えました...なぜ

4

5 に答える 5

5

リスト項目については、プロパティを 100% に設定し、displayプロパティを 100%に設定する必要があります。これがあなたのjsFiddle です。以下を参照してください。inline-blockmin-width

div {
    width: 400px;
    overflow-x: scroll;   
}

li {
    min-width: 100%;
    white-space: nowrap;
    display: table-row; /* or inline-block */   
}

.a, .c, .e, .g {
    background-color: red;
}

.b, .d, .f {
    background-color: blue;
}​

編集

すべてのli要素を最長の幅にするにはli、 を使用しますdisplay: table-row。

デモンストレーションについては、このjsFiddleを参照してください。

li {
    min-width: 100%;
    white-space: nowrap;
    display: table-row;    
}
于 2012-04-12T16:37:57.443 に答える
1

長い壊れないテキスト (aaaaaaaa.....) により、div指定した幅 400px からテキストが押し出されます。幅を維持したい場合は、このルールを適用してテキストの押し出しを止めることができます

word-wrap: break-word;

http://jsfiddle.net/joshdavenport/v6TVg/

このルールのサポートは良好です

于 2012-04-12T16:25:29.327 に答える
0

これは、このコードで修正できます。jsfiddle

ここで行ったことは、内部 div を導入することです

<div id="outer">
    <div id="in">

CSSを次のように設定します

#in {
    width:500px;
}

500px が<li>アイテムの最大幅であることに注意してください。

ちなみに、これが標準的な動作です。WordPress でコード プラグインを使用したことがある場合。それらはまったく同じように動作します。右にスクロールすると、スクロールされたテキストには背景がありません。

于 2012-04-12T17:12:09.190 に答える
-1

リストを次のように定義することで、この問題を克服できます。inline

li { display: inline; }

デモ

于 2012-04-12T16:24:17.793 に答える