it-swarm.com.ru

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

По какой-то причине я не могу помешать UL, и это LI, для переноса…. Я хочу, чтобы ширина UL была точно такой же, как ширина LI в одной строке (без переноса), и если UL становится шире, чем nav- Div (800px), я хочу полосу прокрутки в навигационной панели, чтобы я мог прокрутить 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;
}
18
Michiel

попробуй это

ul {
   white-space:nowrap;
}

li {
   display:inline;
}
45
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;
}
5
kizu

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

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

Установив width для <ul> в inherit, вы можете использовать свойство overflow , чтобы установить поведение переполнения элемента. При значении 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;
}   

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

0
dougajmcdonald