Делить длинный список тегов <li>на столбцы?

Question

У меня есть список около 30 <li> в <ul>. Есть ли способ, используя CSS, разделить их на три столбца из десяти?

Answer 1

В CSS3 это возможно .

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

HTML:

<div id="columns">
  <ul>
... lots of lis ...
  </ul>
</div>

Элементы списка будут перетекать в следующий столбец, когда они превышают высоту контейнера.

Возможно, для более старых браузеров вы могли бы использовать JavaScript, поскольку это кажется более эстетичным, чем критическая функция.

Answer 2

Я обычно устанавливаю ширину в 28% и плаваю влево:

ul li {
   width: 28%;
   margin: .5em 2%;
   float:left;
}

Недостатком является то, что элементы заполняются следующим образом:

- - -
- - -
-

Не нравится:

- - -
- -
- -

Если вы хотите столбцы с вертикальной заливкой, вам нужно 3

Answer 3

есть хорошая статья о списках из нескольких столбцов в Alistapart . Может быть полезным.

Answer 4

Следующее приспособлено для мобильных устройств.

div.a {
  background-color: #ffffff;
  border: 2px solid;
  margin: 0;
  overflow: auto;
  padding: 1%;
  text-align: left;
  word-wrap: break-word;
}
ul.a {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li.spacea {
  float: left;
  width: 2%;
}
li.thirda {
  color: #ff00ff;
  float: left;
  width: 32%;
}
li.thirdb {
  color: #ffff00;
  float: left;
  width: 32%;
}
li.thirdc {
  color: #00ffff;
  float: left;
  width: 32%;
}

<div class="a">
  <ul class="a">
    <li class="thirda">
      The quick brown fox jumped over the lazy dog.
    </li>
    <li class="spacea">
      &nbsp;
    </li>
    <li class="thirdb">
      The quick brown fox jumped over the lazy dog.
    </li>
    <li class="spacea">
      &nbsp;
    </li>
    <li class="thirdc">
      The quick brown fox jumped over the lazy dog.
    </li>
  </ul>
</div>