Как отобразить неупорядоченный список в двух столбцах?
С помощью следующего 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.
13 ответов
Современные Браузеры
используйте модуль столбцов css3 для поддержки того, что вы ищете.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
Устаревшие Браузеры
к сожалению, для поддержки IE вам понадобится решение кода, которое включает JavaScript и DOM-манипуляции. Это означает, что в любое время содержимое списка изменяется вам нужно будет выполнить операцию по переупорядочению списка в столбцы и перепечатке. Решение использует jQuery для краткости.
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;
});
}
Я смотрел на решение @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
etc. Используйте следующий:
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, поскольку ваш ответ помог мне открыть это.
Я попытался опубликовать это как комментарий, но не смог заставить столбцы отображаться правильно (в соответствии с вашим вопросом).
вы просите:
A B
C D
E
... но ответ, принятый в качестве решения, вернется:
A D
B E
C
... так что либо ответ неверен, либо вопрос неверен.
очень простым решением было бы установить ширину вашего <ul>
а затем float и установите ширину вашего <li>
такие предметы, как so
<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).
Мне нравится решение для современных браузеров, но пули отсутствуют, поэтому я добавляю небольшой трюк:
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "• ";
}
вот возможное решение:
фрагмент:
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>
и это делается.
Для 3 столбцов используйте li
ширина как 33%, для 4 столбцов использует 25% и так далее.
Это может быть достигнуто с помощью свойства css count столбца на родительском div,
как
column-count:2;
проверьте это для получения более подробной информации.
как сделать плавающий список DIV появляться в Столбцах, а не строки
Это самый простой способ сделать это. Только 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>
вы можете сделать это очень легко с плагин jQuery-Columns например, чтобы разделить ul с классом .mylist вы бы сделали
$('.mylist').cols(2);
здесь живой пример на jsfiddle
мне это нравится больше, чем с CSS, потому что с решением CSS не все выравнивается вертикально вверх.
еще один ответ через несколько лет!
в этой статье: 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%; }
на 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;
});
}
устаревшее решение в верхнем ответе не сработало для меня, потому что я хотел повлиять на несколько списков на странице, и ответ предполагает один список плюс он использует справедливый бит глобального состояния. В этом случае я хотел изменить каждый список внутри <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]);
}
});
С Bootstrap... Этот ответ (https://stackoverflow.com/a/23005046/1128742) мне указал на это решение:
<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>
Thisd было идеальным решением для меня, глядя на него в течение многих лет:
http://css-tricks.com/forums/topic/two-column-unordered-list/