CSS Элементы горизонтального списка

Итак, я попытался создать горизонтальный список для использования на новом веб-сайте, который я проектирую. Я попытался найти ряд предложений, найденных в Интернете уже, например, установить "float" влево и т.д., Но никто из них не работал, когда дело доходило до устранения проблемы.

    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>

Ответы

Ответ 1

Обновленный ответ

Я заметил, что многие люди используют этот ответ, поэтому я решил немного его обновить. Если вы хотите увидеть исходный ответ, проверьте ниже. Новый ответ демонстрирует, как вы можете добавить какой-то стиль в свой список.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    zoom:1;
    *display:inline;
    /* this fix is needed for IE7- */
}
<ul>
    <li> <a href="#">some item</a>

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

    </li>
</ul>

Ответ 3

Лучше всего использовать inline-block, потому что вам больше не нужно использовать clear:both в конце списка.

Попробуйте следующее:

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

CSS

ul > li{
    display:inline-block;
}

Взгляните на это здесь: http://jsfiddle.net/shahverdy/4N6Ap/

Ответ 4

Вы также можете использовать встроенные блоки, чтобы избежать плавающих элементов

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

а затем стиль:

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

таким образом вам не нужно ничего плавать, устраняя необходимость в clearfixes

Ответ 5

Здесь вы можете найти рабочий пример с дополнительными предложениями о динамическом изменении размера списка.

Я использовал display: inline-block и процентное дополнение, чтобы родительский список мог динамически изменять размер:

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

плюс еще два правила для удаления заполнения для первого и последнего элементов.

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