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

Question

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

У меня есть список элементов, которые я хочу разместить в пространстве, ограниченном по вертикали:

<ul>

    <li>One</li>

    <li>Two</li>

    <li>Three</li>

    <li>Four</li>

    <li>Five</li>

    <li>Six</li>

</ul>

Поскольку я не хочу, чтобы список имел больше определенной высоты, но я могу расширить его по горизонтали, я хочу разделить список на столбцы, например:

One    Two     Three

Four   Five    Six

Или, наоборот (в моем случае порядок не важен)

One    Three   Five

Two    Four    Six

Свойство css column-count позволяет разбить список на столбцы, но принимает только фиксированное число столбцов. Я не знаю, сколько их было. элементы, которые у меня будут (это может быть от 1 до более чем 40), поэтому, если я установлю число столбцов на 3, Любой список с более чем 6 элементами будет слишком высоким, а если есть только 4 элемента, то только в первом столбце будет два элемента, и он будет выглядеть неравномерно.

Итак, в идеале мне нужно было бы свойство row-count, но его не существует. Я думаю, что могу сделать это и в Javascript, но я ищу решение только для CSS.

Я попробовал кое-что: float:left на каждом li ставит список в одну строку. К разбейте его на две строки, Мне нужно было бы не применить float:left к элементу N/2. Я не знаю, как это сделать.

Я также знаю, что могу сделать это, разбив его на несколько ul, каждый с двумя li и float:left, но я хотел бы избежать путаницы HTML для чего-то полностью презентационного.

Есть ли у кого-нибудь решение этой проблемы?

Edit: я думаю, что я не был ясен в объяснении моих требований. Я хочу, чтобы список был отсортирован в столбцы, не зная, сколько элементов у меня будет, и так, что у меня всегда будет две строки.

Итак, например, с 7 пунктами я хочу иметь:

One    Two     Three   Four

Five   Six     Seven

И с 3 пунктами:

One    Two

Three

783 5

css css3 html-lists

5 ответов:

Comments

Ничего не найдено.

Poornima · Accepted Answer · 2013-12-13 18:19:03

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

Получить количество элементов LI и разделить его на количество строк и установить это значение в свойство column-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>
Скрипка здесь

Редактировать:

Та же реализация использование простого 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.

user1620090 · Accepted Answer · 2013-12-13 17:51:48

Вы можете установить свои li на 33% ширины и плавающие друг против друга, как только не будет достаточно места в ряду, они будут сдвинуты вниз в рядах 3 равной ширины.
ul li{
  width: 33%;
  float: left;
}

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-12-13 17:46:01

Почему бы не дать ему 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 calucator, то используйте это:
width: calc(var1 + var2); // calc will do the math..
Вот скрипка для этой ситуации: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/

user3037493 · Accepted Answer · 2013-12-13 17:56:24

Вы можете использовать
li:nth-child(even) 

li:nth-child(odd)
Http://jsfiddle.net/nCmZT/

Amarnath Balasubramanian · Accepted Answer · 2017-05-23 15:01:47

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

Fiddle: Demo предоставлено по ссылке

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;
}