web-dev-qa-db-ja.com

ulの水平スクロールバー

どういうわけか、ULとLIの折り返しを防ぐことはできません。 ULの幅を1行のLIの幅に正確に一致させたい（折り返しなし）。ULがnav-div（800px）より広くなった場合は、nav内にスクロールバーを配置してLIをスクロールできるようにします。

ディスプレイ、ホワイトスペース、幅、高さについてはほとんど何でも試しましたが、ULに特定の幅を与えないと機能しません。ただし、これはオプションではありません。ページが生成され、1〜20個のLIを含めることができるためです。

ULの幅を設定せずにスクロールバーを表示する方法を知っている人はいますか？

HTML：

<div id="nav">
     <ul id="navbuttons">
          <li>Some text</li>
          <li>Some text</li>
          ...
     </ul>
</div>

CSS：

div#nav
{
    height: 100px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

div#nav ul li
{
    margin-right: 15px;
    float: left;
    font-size: 12px;
    list-style-type: none;
}
htmlcssscrollbarhtml-lists
19
Michiel

これを試して

ul {
   white-space:nowrap;
}

li {
   display:inline;
}
50
j03w

ラッパーにはdisplay: inline-block; white-space: nowrap;を、子にはdisplay: inlineまたはdisplay: inline-blockを使用できます。

したがって、次のようになります。 http://jsfiddle.net/kizu/98cFj/

また、IEをサポートする必要がある場合は、条件付きコメントにこのハックを追加してinline-blocksを有効にします。

.navbuttons,
.navbuttons LI {
    display: inline;
    zoom: 1;
}
6
kizu

次のルールを追加します。

div#nav ul {
   overflow-x: hidden;
   overflow-y: scroll;
   white-space: nowrap;
}
0
Yossi Shasho

<ul>のwidthをinheritに設定すると、 overflow property を使用して要素のオーバーフロー動作を設定できます。値scrollを使用すると、コンテンツの高さと幅がボックスの高さと幅をオーバーフローすると、要素のすべてのコンテンツが（x方向とy方向の両方に）スクロールします。

div#nav ul
{
    overflow: scroll;
    width: inherit;
    height: inherit;
}
0
Asbjørn Ulsberg

警告：未テスト

Liアイテムの幅を設定するだけではありませんか？

div#nav ul li {    
   margin-right: 15px;     
   float: left;     
   font-size: 12px;     
   list-style-type: none;
   width: 100px;
}

そして、幅を固定幅に設定し、ULでオーバーフローしてスクロールしますか？

div#nav ul {
    width: 800px;
    overflow: scroll;
}

これにより、LIが8を超えたときにULがスクロールするようになります。

0
dougajmcdonald