Comment puis-je faire & lt; li & gt; les éléments s'écoulent de gauche à droite plutôt que de haut en bas?

Voici mon <li> éléments. Je veux qu'ils apparaissent de gauche à droite au lieu de haut en bas.

<div class="nav">
  <ul>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
  </ul>
</div>

Comment puis-je faire cela?

MODIFIER:comment contrôler l'espacement entre chaque élément li et ses bachground de la couleur et de l'espacement entre un élément et la bordure de l'élément li?

source d'informationauteur omg | 2009-06-24

  1. 19

    je pense que vous êtes à la recherche pour

    li {
  display:inline;
}
  2. 6

    Il y a un peu de moyens.

    Une façon est display:inline que les autres postes de mentionner

    Une autre façon est d'float:left;

    edit: plus de détails! essayez ceci dans une page 

    <style>
/* style 1 */
div.nav1 ul li
{
display:inline;
border: solid 1px black;
padding: 10px;
margin: 10px;
list-style-type: none;
line-height: 4em;
}
/* style 2 */
div.nav2 ul li
{
float: left;
border: solid 1px black;
padding: 10px;
margin: 10px;
list-style-type: none;
}
</style>
<h1>using display: inline;</h1>
<div class="nav1">
<ul>
<li><a href="#">inline</a></li>
<li><a href="#">inline blah bla</a></li>
<li><a href="#">i am not so neat on</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">wrapping and I probably</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">need a bit of work and tweaking</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">the "line-height" css property</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">to make me wrap better</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">also notice how i tend to break a line up into .. two.  see?  make your browser narrow.</a></li>
<li><a href="#">inline</a></li>
</ul>
</div>
<hr />
<h1>using float:left;</h1>
<div class="nav2">
<ul>
<li><a href="#">floated left</a></li>
<li><a href="#">i tend to behave</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">better for wrapping</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">when the list</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">reaches the edge of the page</a></li>
<li><a href="#">floated left</a></li>
</ul>
</div>
  3. 4

    Essayer:

    <style>
.nav li {display:inline;}
</style>
<div class="nav">
<ul>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
<li><a href="test">test</a></li>
</ul>
</div>

    Les styles devrait vraiment être dans une feuille de style externe, je viens de les mettre sur la page pour des raisons de simplicité.

  4. 4

    Vous pouvez utiliser l'attribut float:

    .nav ul li{float:left;}
  5. 1

    Juste pour vous faire savoir, que IE ne "step-down" chose quand vous flotter les éléments de la liste à gauche, et je pense que IE est le seul navigateur à le faire, tous les autres, continuez tout droit. Pour avoir la liste des éléments va tout droit, utilisez "display: inline" dans votre css au lieu de "float: left", cela devrait fonctionner dans tous les navigateurs de cette façon. Pour de plus dept explication, découvrez cette tutoriel rapide

  6. 1
    .nav li  { display: inline }

    Pour plus de détails et d'inspiration, jetez un oeil à Listamatic. Ils ont des tonnes d'excellents didacticiels étape par étape, des explications et tout et tout sur les margin, padding, et des problèmes de compatibilité navigateur.

  7. 0

    Pour répondre à la question après le montage:

    li {
float: left;
display: block;
padding: 4px 12px;   /* example spacing */
margin: 0px 4px;     /* example margin */
}

    Edit: Vous pouvez appliquer le rembourrage et le display:block pour le <a> élément de sorte que vous pouvez cliquer sur le rembourrage ainsi:

    li {
float: left;
margin: 0px 4px;     /* example margin */
}
li a {
display: block;
padding: 4px 12px;   /* example spacing */
}
  8. 0

    Vous pouvez utiliser display: inlinecomme ceci:

    li{
display: inline;
}

    Ou, si vous avez plus de listes, vous pouvez affecter une classe à cette liste spécifique:

    <ul class="navbar horizontal">
<li>Test</li>
</ul>

    Et puis le style comme:

    .horizontal{
display: inline;
}