Как отобразить неупорядоченный список в двух столбцах?
В следующем HTML, какой самый простой способ отобразить список в виде двух столбцов?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Желаемый дисплей:
A B
C D
E
Решение должно работать в Internet Explorer.
Ответы
Ответ 1
Современные браузеры
использовать модуль столбцов css3 для поддержки того, что вы ищете.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
http://jsfiddle.net/HP85j/8/
Устаревшие браузеры
К сожалению, для поддержки IE вам понадобится решение кода, которое включает JavaScript и манипуляции с dom. Это означает, что в любое время, когда содержимое списка изменяется, вам нужно будет выполнить операцию для переупорядочения списка в столбцы и перепечатки. В приведенном ниже решении для краткости используется jQuery.
http://jsfiddle.net/HP85j/19/
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS
.columns{
float: left;
position: relative;
margin-right: 20px;
}
EDIT:
Как указано ниже, это упорядочивает столбцы следующим образом:
A E
B F
C G
D
в то время как OP запросил вариант, соответствующий следующему:
A B
C D
E F
G
Для выполнения варианта вы просто меняете код на следующее:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
Ответ 2
Я смотрел на решение @jaider, которое работало, но я предлагаю немного другой подход, который, по моему мнению, более прост в работе и который я видел хорошо в браузерах.
ul{
list-style-type: disc;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
list-style-position: inside;//this is important addition
}
По умолчанию неупорядоченный список отображает позицию пули снаружи, но затем в некоторых браузерах это может вызвать некоторые проблемы с отображением на основе браузера, способного выложить ваш сайт.
Чтобы отобразить его в формате:
A B
C D
E
и т.д.. используйте следующее:
ul li{
float: left;
width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
list-style-type: disc;
}
Это должно решить все ваши проблемы с отображением столбцов. Все самое лучшее и спасибо @jaider, так как ваш ответ помог мне разобраться в этом.
Ответ 3
Я пробовал опубликовать это как комментарий, но не смог заставить столбцы отображаться правильно (согласно вашему вопросу).
Вы запрашиваете:
A B
C D
Е
... но ответ, принятый как решение, вернется:
A D
B E
С
... так что либо ответ неправильный, либо вопрос.
Очень простым решением было бы установить ширину вашего <ul>, а затем поплавок и задать ширину ваших <li> элементов таким образом
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul{
width:210px;
}
li{
background:green;
float:left;
height:100px;
margin:0 10px 10px 0;
width:100px;
}
li:nth-child(even){
margin-right:0;
}
Пример здесь http://jsfiddle.net/Jayx/Qbz9S/1/
Если ваш вопрос неверен, тогда применяются предыдущие ответы (с исправлением JS для отсутствия поддержки IE).
Ответ 4
Мне нравится решение для современных браузеров, но пули отсутствуют, поэтому я добавляю в него небольшой трюк:
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "• ";
}
![enter image description here]()
Ответ 5
Здесь возможно решение:
Отрывок:
ul {
width: 760px;
margin-bottom: 20px;
overflow: hidden;
border-top: 1px solid #ccc;
}
li {
line-height: 1.5em;
border-bottom: 1px solid #ccc;
float: left;
display: inline;
}
#double li {
width: 50%;
}
<ul id="double">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Ответ 6
Это может быть достигнуто с использованием свойства css-count css для родительского div,
как
column-count:2;
проверьте это для более подробной информации.
Как создать плавающий список DIV в столбцах, а не в строках
Ответ 7
Это самый простой способ сделать это. Только CSS.
- добавить ширину к элементу ul.
- добавить отображение: встроенный блок и ширина нового столбца (должно быть меньше половины ширины ul).
ul.list {
width: 300px;
}
ul.list li{
display:inline-block;
width: 100px;
}
<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Ответ 8
Вы можете сделать это очень легко с помощью jQuery-Columns Plugin, например, чтобы разделить ul с классом .mylist, вы бы сделали
$('.mylist').cols(2);
Здесь живой пример на jsfiddle
Мне нравится это лучше, чем с CSS, потому что с помощью решения CSS не все выравнивается по вертикали вверх.
Ответ 9
более одного ответа через несколько лет!
в этой статье: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML:
<ul id="double"> <!-- Alter ID accordingly -->
<li>CSS</li>
<li>XHTML</li>
<li>Semantics</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Web Standards</li>
<li>PHP</li>
<li>Typography</li>
<li>Grids</li>
<li>CSS3</li>
<li>HTML5</li>
<li>UI</li>
</ul>
CSS
ul{
width:760px;
margin-bottom:20px;
overflow:hidden;
border-top:1px solid #ccc;
}
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
#double li { width:50%;}
#triple li { width:33.333%; }
#quad li { width:25%; }
#six li { width:16.666%; }
Ответ 10
В updateColumns() нужно if (column >= columns.length) вместо if (column > columns.length) перечислить все элементы (например, C пропускается), поэтому:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column >= columns.length){
column = 0;
}
console.log(column, el, idx);
$(columns.get(column)).append(el);
column += 1;
});
}
http://jsfiddle.net/e2vH9/1/
Ответ 11
Унаследованное решение в верхнем ответе не работало для меня, потому что я хотел повлиять на несколько списков на странице, и ответ предполагает один список, плюс он использует справедливую бит глобального состояния. В этом случае я хотел изменить каждый список внутри <section class="list-content">:
const columns = 2;
$("section.list-content").each(function (index, element) {
let section = $(element);
let items = section.find("ul li").detach();
section.find("ul").detach();
for (let i = 0; i < columns; i++) {
section.append("<ul></ul>");
}
let lists = section.find("ul");
for (let i = 0; i < items.length; i++) {
lists.get(i % columns).append(items[i]);
}
});
Ответ 12
Вы можете использовать CSS только для установки двух или более столбцов
AE
В
С
D
<ul class="columns">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul.columns {
-webkit-columns: 60px 2;
-moz-columns: 60px 2;
columns: 60px 2;
-moz-column-fill: auto;
column-fill: auto;
}
Ответ 13
С Bootstrap... Этот ответ (fooobar.com/questions/46048/...) заставил меня указать на это решение:
<ul class="list-unstyled row">
<li class="col-xs-6">Item 1</li>
<li class="col-xs-6">Item 2</li>
<li class="col-xs-6">Item 3</li>
</ul>
http://jsfiddle.net/patrickbad767/472r0ynf/
Ответ 14
Это было идеальным решением для меня, глядя на него годами:
http://css-tricks.com/forums/topic/two-column-unordered-list/
