горизонтальная полоса прокрутки для ul

Question

По какой-то причине я не могу предотвратить UL, и это LI для упаковки. Я хочу, чтобы ширина UL была точно равна ширине 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;
}

Answer 1

попробуйте

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

Answer 2

Вы можете использовать display: inline-block; white-space: nowrap; для оболочки и display: inline или display: inline-block для детей.

Итак, это будет выглядеть так: http://jsfiddle.net/kizu/98cFj/

И, есливам потребуется поддержка IE, добавьте этот хак в условные комментарии, чтобы включить в него inline-block s:

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

Answer 3

Добавьте следующее правило:

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

Answer 4

Предупреждение: не проверено

Не хотите ли вы просто установить ширину для элемента 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;
}   

Это заставит вас прокрутить UL, когда ваш li пройдет мимо, скажем, 8, это то, что вы ищете?

Answer 5

Установив width для <ul> на inherit, вы можете использовать свойство overflow , чтобы установить поведение переполнения элемента. При значении scroll все содержимое элемента будет прокручиваться (в обоих направлениях x и y), если высота и ширина содержимого превышают значение поля:

div#nav ul
{
    overflow: scroll;
    width: inherit;
    height: inherit;
}