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

по какой-то причине я не могу предотвратить UL, и это ли от упаковки. Я хочу, чтобы ширина UL была точно шириной LI на одной линии (без упаковки), и если UL становится шире, чем nav-div (800px), я хочу полосу прокрутки в nav, чтобы я мог прокручивать LI.

Я пробовал почти все с дисплеем, пробелами, шириной и высотой, но я могу заставить его работать, только если я дам UL определенную ширину. Это, однако, не является опцией, так как страница автоматически и может содержать 1-20 ли.

кто-нибудь знает, как сделать полосу прокрутки, не устанавливая ширину 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;
}
18
css html html-lists scrollbar

5 ответов

попробуй такое

ul {
   white-space:nowrap;
}

li {
   display:inline;
}
44

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

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

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

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

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

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

Нюанс: Непроверенные

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

0

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

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