Pour une raison quelconque, je ne peux pas empêcher l'UL et ses LI d'enrouler ..__ Je veux que la largeur de l'UL soit exactement la largeur des LI sur une ligne (sans emballage) et div (800px), je veux une barre de défilement dans le nav afin que je puisse faire défiler le LI.
J'ai essayé à peu près n'importe quoi avec l'affichage, les espaces, la largeur et la hauteur, mais je ne peux le faire fonctionner que si je donne à l'UL une certaine largeur. Ceci, cependant, n'est pas une option, car la page est générée et peut contenir 1 à 20 LI.
Est-ce que quelqu'un sait comment faire monter une barre de défilement sans régler la largeur de l'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;
}
essaye ça
ul {
white-space:nowrap;
}
li {
display:inline;
}
Vous pouvez utiliser display: inline-block; white-space: nowrap;
pour l'encapsuleur et display: inline
ou display: inline-block
pour les enfants.
Ainsi, cela ressemblerait à ceci: http://jsfiddle.net/kizu/98cFj/
Et, si vous avez besoin de supporter IE, ajoutez ce hack dans les commentaires conditionnels pour activer inline-block
s dans celui-ci:
.navbuttons,
.navbuttons LI {
display: inline;
zoom: 1;
}
Ajoutez la règle suivante:
div#nav ul {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;
}
En définissant width
sur <ul>
sur inherit
, vous pouvez utiliser la propriété overflow
pour définir le comportement de débordement de l'élément. Avec la valeur scroll
, tout le contenu de l'élément défilera (dans les directions x et y) si la hauteur et la largeur du contenu dépassent celles de la boîte:
div#nav ul
{
overflow: scroll;
width: inherit;
height: inherit;
}
Avertissement: non testé
Ne voulez-vous pas simplement définir une largeur pour l'élément li
div#nav ul li {
margin-right: 15px;
float: left;
font-size: 12px;
list-style-type: none;
width: 100px;
}
Et ensuite définir la largeur à une largeur fixe et déborder sur l'UL pour faire défiler?
div#nav ul {
width: 800px;
overflow: scroll;
}
Cela ferait défiler votre UL lorsque votre lecture est passée, dites 8, est-ce ce que vous recherchez?