Как отобразить список в две строки?

Ответ 1

Вот простой способ сделать это с помощью jquery. Я знаю, что упоминается, что нужен способ CSS, но это только для будущих ссылок, если кто-то хочет ссылаться на этот вопрос.

Получите количество элементов LI и разделите его на количество строк и установите это значение в свойство count-count.

Jquery

$(document).ready(function() {
var numitems =  $("#myList li").length;

$("ul#myList").css("column-count",Math.round(numitems/2));
});

CSS

ul {
  width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}

HTML

<ul id="myList">
<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>

Загадка здесь

EDIT:

Такая же реализация с использованием простого javascript.

var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);

Вам нужно установить ширину UL, так как количество строк будет зависеть от ширины даже после установки столбца. Вы можете установить его на 100%, но тогда количество строк изменится в зависимости от размера окна. Чтобы ограничить количество строк до 2, может потребоваться фиксированная ширина для UL.

Ответ 2

Вы можете установить свой лити на ширине 33% и плавать друг против друга, как только недостаточно места в строке, они будут сдвинуты вниз в строках с равной шириной.

ul li{
  width: 33%;
  float: left;
}

Ответ 3

Почему бы не дать ему max-width?

ul {
  max-width: somevalue; // which would last when the third item ends
}

Или вы можете добавить к ним класс как

<ul>
    <li class="one">One</li>
    <li class="one">Two</li>
    <li class="one">Three</li>
    <li class="two">Four</li>
    <li class="two">Five</li>
    <li class="two">Six</li>
</ul>

Теперь CSS как:

.one {
  display: inline;
}

.two {
  display: inline;
}

Последнее, что добавляется в качестве

ul li {
  padding: somevalue;
} 

И для нарезки:

ul {
  max-width: 200px; // to break the list
}

Удачи вам в том, что вы можете сначала проверить ширину списка! А затем разрежьте его на две равные части с помощью JS, а затем примените его.

Если вы хотите получить калькулятор CSS, используйте это:

width: calc(var1 + var2); // calc will do the math..

Вот сценарий для этой ситуации: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/

Ответ 4

вы можете использовать

li:nth-child(even) 

li:nth-child(odd)

http://jsfiddle.net/nCmZT/

Ответ 5

Источник: Создание двухуровневого неупорядоченного списка

Fiddle: Демонстрация предоставлена ​​в ссылке

HMTL

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

CSS

.two-col-special {
    border: 1px dotted blue;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}

Ответ 6

Вот пример использования display: flex и flex-direction: row для изменения порядка столбцов и строк:

#list-1 {
  border: 3px solid red;
  columns: 2;
  column-gap: 5px;
  width: 200px;
}

#list-2 {
  border: 3px solid blue;
  columns: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto; /* can change this */
  width: 200px;
}

#list-2 li {
  width: 100px;
  height: auto;
}

<ul id="list-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>

<ul id="list-2">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>