3

だから、私はinline-blockリストアイテムのリストを持っています。それらはすべて幅が異なりますが、常に同じ線上にあります。リストアイテムの数も異なる場合があるため、リスト全体の幅を予測することはできません。リストは常に親コンテナの中央に配置する必要がありますが、幅が100％を超えると、2行にまたがるのではなく、水平方向にスクロールする必要があります。

さて、私が理解している限り、をに設定するwidthとauto、実際にはに設定されますshrink-to-fit–本質的max-width: 100%;には、これは私が望むものではありません。

CSSだけでこれを確実に達成する方法はありますか？

マークアップ

<div>
  <ul>
    <li>Banana</li>
    <li>Krypton</li>
    <li>Molten boron</li>
  </ul>
</div>

CSS

div {
  overflow-x: auto;
  width: 500px;
}
ul {
   max-width: 5000px; /* Doesn't override */
   width: auto; /* Calculated to 500px or less */
}
li { display: inline-block; }

これはレスポンシブレイアウトであるため、コンテナの幅は正確に固定されていませんが、肉体労働を恐れていないことに注意してください。

私のJSフィドル：http：//jsfiddle.net/TheNix/gdRaB/

私の質問は、子要素がフロートされておらず、エルゴがまだフロー内にあることを除いて、100％より大きいCSS動的幅に似ています（これを制御できます）。

width: auto;仕様について： http ：//www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

4

3 に答える 3

3

私があなたの質問を誤解しない限り、あなたは単にwhite-space: nowrap;あなたのul（フィドル）に追加することができます。次に、オーバーフロー時に目的の水平スクロールバーが表示されます。

[編集]：そしてtext-align: center;あなたのdiv（フィドル）に

于 2012-12-17T19:48:29.633 に答える
1

あなたが欲しいのは最大幅ではなく最小幅だと思います

ul {
   **min-width: 5000px;** /* Doesn't override */
   width: auto; /* Calculated to 500px or less */
}

http://jsfiddle.net/gdRaB/5/

于 2012-12-17T19:45:50.073 に答える
0

http://jsfiddle.net/gdRaB/10/

divをコンテナdivに入れます

<div class="container">
<div class="list">
    <ul>
        <li>Banana</li>
        <li>Molten Boron</li>
        <li>Steak sauce</li>
        <li>Unicorn tears</li>
        <li>Ground-up griffins</li>
        <li>Semi-alive hobgoblins (frozen)</li>
    </ul>
    </div>
</div>



.container{
    width: 500px;
    overflow: auto;}

.list{
    width: 5000px;
}

ul {
    width: 5000px;
    overflow: visible;
    width: auto;
    display: inline-block;
}

li {
    background: #ccc;
    display: inline-block;
    margin: 0 5px;
    padding:2px 5px;
}​

</ p>

于 2012-12-17T19:48:50.597 に答える