水平にリストされたulを水平方向にオーバーフローさせることはできません（そしてスクロール）

並べ替えられていないリストを水平方向に並べ替えることを試みています（float：leftで実行）。代わりに、それは自動的にでもオーバーフロー-Yと、さらに次の行（に溢れて：？どれも、それが自動的に垂直スクロールバーを作成していない任意のアイデア水平にリストされたulを水平方向にオーバーフローさせることはできません（そしてスクロール）

<style type="text/css"> 
    ul { 
     height:15px; 
     width:400px; 
     overflow-y:none; 
     overflow-x:auto; 
    } 

    li { 
     float:left; 
    } 

</style> 

<body> 
    <div> 
     <ul id="someList"> 
      <li>element 1</li> 
      <li>element 2</li> 
      <li>element 3</li> 
      <li>element 4</li> 
      <li>element 5</li> 
      <li>element 6</li> 
      <li>element 7</li> 
     </ul> 
    </div> 
</body>

出典

2011-06-28 achow

並べ替えられていないリストで水平スクロールバーをどのようなコンテキストで使用したいのですか？ – Zoidberg

私が正しく理解していれば、これはそれをする必要があります：

http://jsfiddle.net/Uyc8d/

は私が（代わりにfloat: leftの）display: inline-blockに切り替えてきた、と私はラップを防ぐためにwhite-space: nowrapを使用しています。

ul { 
    width: 400px; 
    overflow-x: scroll; 
    background: #ccc; 
    white-space: nowrap 
} 

li { 
    display: inline-block; 

    /* if you need ie7 support */ 
    *display: inline; 
    zoom: 1 
}

出典

2011-06-28 22:29:23 thirtydot

私は感銘を受けました。 – Zoidberg

ありがとう、良い先生。印象的な。 – achow

white-space：nowrap;ありがとう！私の人生のために –

水平にリストされたulを水平方向にオーバーフローさせることはできません（そしてスクロール）

答えて

関連する問題