Éléments de liste horizontaux

Question

J'ai donc tenté de créer une liste horizontale à utiliser sur un nouveau site web que je suis en train de concevoir. J'ai essayé un certain nombre de suggestions déjà trouvées en ligne, telles que le réglage de la valeur "float" à gauche et autres, mais aucune d'entre elles n'a permis de résoudre le problème.

    ul#menuItems {
      background: none;
      height: 50px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    ul#menuItems li {
      display: inline;
      list-style: none;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 50px;
    }
    ul#menuItems li a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      color: #000;
      height: 50px;
      width: auto;
      display: block;
      text-align: center;
      line-height: 50px;
    }

<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>

Pour l'instant, je ne suis pas sûr de la cause de ce problème, comment dois-je procéder pour le résoudre ?

Answer 1

Réponse actualisée

J'ai remarqué que beaucoup de personnes utilisent cette réponse, j'ai donc décidé de la mettre à jour un peu. Elle ne prend plus en charge les navigateurs désormais non pris en charge.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>

Answer 2

Je pense que la solution simple que j'ai trouvée est la suivante

ul{
    display:flex;
}

Answer 3

Ce violon montre comment

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

D'excellentes références sur les listes et le css ici :

http://alistapart.com/article/taminglists/

Answer 4

Une bien meilleure solution consiste à utiliser inline-block car vous n'avez pas besoin d'utiliser clear:both à la fin de votre liste.

Essayez ça :

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
    </li>
</ul>

CSS :

ul > li{
    display:inline-block;
}

Jetez-y un coup d'œil ici : http://jsfiddle.net/shahverdy/4N6Ap/

Answer 5

Vous pouvez également utiliser des blocs en ligne pour éviter les éléments flottants.

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
   </li>
</ul>

et ensuite le style comme :

li{
    /* with fix for IE */
    display:inline;
    display:inline-block;
    zoom:1;
    /*
    additional styles to make it look nice
    */
 }

de cette façon, vous n'aurez pas besoin de faire flotter quoi que ce soit, éliminant ainsi le besoin de clearfixes.