poziomy pasek przewijania dla ul

Question

Z jakiegoś powodu nie mogę zapobiec zawijaniu UL i LI. Chcę, aby szerokość UL była dokładnie taka sama jak szerokość LI na jednej linii (bez zawijania), a jeśli UL jest szerszy niż nav-div (800px), chcę pasek przewijania w nawigacji, abym mógł przewijać LI.

Próbowałem prawie wszystko z wyświetlaczem, białymi spacji, szerokości i wysokości, ale mogę go uruchomić tylko wtedy, gdy dam UL określoną szerokość. To jednak nie jest opcja, ponieważ strona jest generowana i może zawierać 1-20 LI.

Czy ktoś wie, jak ustawić pasek przewijania bez ustawiania szerokości 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

spróbować

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
} 

Answer 2

Ustawiając width na <ul> do inherit można użyć overflow property ustawić zachowanie przelewowy elementu. Z wartością scroll wszystkie treści elementu będzie przewijać (w obu x i y kierunkach), jeśli wysokość i szerokość zawartości porwała że z pudełka:

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

Answer 3

zastrzeżenie: niesprawdzone

Would nie po prostu chcesz ustawić szerokość elementu li

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

a następnie ustawić szerokość do stałej szerokości i przelewem na UL do przewijania?

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

To spowodowałoby, że UL przewinąłbyś się, gdy twoje miny przeszły obok, powiedzmy 8, czy to jest to, o co prosisz?

Answer 4

Można użyć display: inline-block; white-space: nowrap; dla owinięcia i display: inline lub display: inline-block dla dzieci.

Tak, to będzie wyglądać następująco: http://jsfiddle.net/kizu/98cFj/

A jeśli trzeba wspierać IE dodać ten siekać w komentarzach warunkowych włączyć inline-block w niej jest:

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

Answer 5

Dodaj następujący zasada:

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