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

Ответ 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, так как это кажется более эстетичным, чем критическая функция.

Ответ 2

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

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

Недостатком этого является то, что элементы заполняются так:

- - -
- - -
-

Не нравится:

- - -
- -
- -

Если вам нужны столбцы с вертикальным заполнением, вам нужно 3 <ul> s.

Ответ 3

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

Ответ 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>