web-dev-qa-db-fra.com

barre de défilement horizontale pour ul

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;
}
htmlcssscrollbarhtml-lists
18
Michiel

essaye ça

ul {
   white-space:nowrap;
}

li {
   display:inline;
}
45
j03w

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-blocks dans celui-ci:

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

Ajoutez la règle suivante:

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

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;
}
0
Asbjørn Ulsberg

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?

0
dougajmcdonald