Разметка списка HTML в равномерно расположенных столбцах

Question

Я бы хотел выложить список, такой как следующий, в 2/3 равномерно расположенных столбцах

<ul>
  <li>one<li>
  <li>two<li>
  <li>three<li>
  <li>four<li>
  <li>five<li>
  <li>six<li>
  <li>seven<li>
  <li>eight<li>
  <li>nine<li>
</ul>

Одним из решений является разделение списка на два списка и размещение одного из них справа, возможно с полем, например

  <div id="col2">
    <ul>
      <li>one<li>
      <li>two<li>
      <li>three<li>
      <li>four<li>
      <li>five<li>
    </ul>
  </div>

  <ul>
    <li>six<li>
    <li>seven<li>
    <li>eight<li>
    <li>nine<li>
  </ul>

#col2 {
    float: right;
    margin-right: 450px;
}

Это работает нормально, но имеет ряд недостатков:

1. (Не) семантическая разметка - это на самом деле не 2 списка, я разделил один список на 2, просто чтобы было проще оформить
2. Поле должно быть вручную установлено на что-то, что создает видимость равномерного распределения
3. Если браузер сделан достаточно узким, правый столбец переходит во второй.

Есть ли лучший способ сделать это, желательно без использования таблицы?

---

Обновление:

Я опробовал Метод 1 , но я вижу странные результаты. Если вы посмотрите на этот список с 3 столбцами , то увидите, что в первых 2 столбцах есть «дыры». Есть идеи почему?

Answer 1

В этой статье из A List Apart описаны общепринятые методы, близкие к лучшим практикам, которые мы можем получить, для того, что вы описываете.

Answer 2

Высота

-s отличается. Попробуйте установить фиксированную высоту для элемента списка в CSS. Вы также можете использовать что-то вроде

border: 1px solid red;

Как одно из правил для элемента списка, чтобы увидеть, что происходит.

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

Answer 3

Я не знаю, хотите ли вы, чтобы 2 были непосредственно ниже 1, или если они могут быть рядом с 1, например:

    1    2    3
    4    5    6

Потому что, если это так, вы можете присвоить вашим li фиксированную ширину 33% и плавать их или отображать их встроенными.

Редактировать: Это в основном метод 1 статьи Рекс М упоминается (просто прочитайте это, приятно):

Вы можете использовать уже существующий html, первый полный список и добавить стили:

ul {
    width: 100%;        // for example
}
li {
    float: left;        // option 1
    display: inline;    // option 2, just one of the two
    width: 33%;         // for 3 columns, use 50% for two columns
}

Это все в статье.

Answer 4

Почему без использования таблицы? Это точно для чего предназначены таблицы.