É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

Ici vous trouverez un exemple fonctionnel, avec quelques suggestions supplémentaires sur le redimensionnement dynamique de la liste.

J'ai utilisé display:inline-block et un pourcentage de remplissage pour que la liste des parents puisse changer de taille de façon dynamique :

display:inline-block;
padding:10px 1%;
width: 30%

plus deux règles supplémentaires pour supprimer le rembourrage du premier et du dernier élément.

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}