Як відобразити не упорядкований список у двох стовпцях?


215

За допомогою наступного 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
Ось живий приклад того, як легко зробити це у jquery: jsfiddle.net/EebVF/5 Використання цього плагіна jquery: github.com/fzondlo/jquery-column - мені це подобається краще, ніж CSS, тому що з рішенням CSS не все вирівнюється вертикально до верху.
newUserNameHere

Відповіді:


371

Сучасні браузери

використовувати модуль стовпців css3 для підтримки того, що ви шукаєте.

http://www.w3schools.com/cssref/css3_pr_column.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;
}

Редагувати:

Як зазначено нижче, стовпці будуть упорядковані наступним чином:

A  E
B  F
C  G
D

в той час як ОП просила варіант, що відповідає наступному:

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
Ви не відображаєте елементи в правильному порядку: jsfiddle.net/HP85j/258 Наприклад, потрібний дисплей у першому рядку є A B(другий елемент слід додати праворуч), але у ваших прикладах є A E.
Паоло Моретті

1
Чудова робота, хоча логіка є хибною, якщо є більше 2 стовпців, я створив тут виправлення: jsfiddle.net/HP85j/393
Tr1stan

2
кулі відсутні
Джайдер

1
Напевно, більш імовірно, що список бажає заповнити стовпчик 1 перед стовпцем 2. Можливо, буде простіше просто переупорядкувати елементи списку, так що, здається, вони заповнювались до вниз. Звичайно, це може зажадати повторної роботи, якщо список зміниться. У будь-якому випадку, відповідь Габріеля на CSS було саме те, що мені потрібно, дякую!
каральниця

3
Лише пізнє оновлення, я вважаю, що перший варіант буде працювати в сучасних браузерах IE.
Фіз

82

Я дивився на рішення @ 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
Існує проблема з цим методом. Він чудово підходить для відображення дуже коротких (1 символ у цьому прикладі) списку елементів. Створіть список із більш довгими описами, а другий стовпець перекриває перший, а також закінчиться контейнером ul.
Кудлатий

1
Я трохи змінив це, змінивши float: зліва для відображення: вбудований блок для елементів li, крім того, що це творило чудеса для мене.
ZeRemz

41

Я спробував розмістити це як коментар, але не вдалося відобразити стовпці правильно (відповідно до вашого запитання).

Ви просите:

AB

CD

Е

... але відповідь, прийнята як рішення, повернеться:

AD

БУТИ

С

... значить, або відповідь невірна, або питання є.

Дуже простим рішенням буде встановити ширину ваших, <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).


@Gabriel ваше рішення і поведінка хороша і як очікувалося, тому я не намагаюся вибити вашу відповідь. Ей ... я просто думаю, що це питання може бути неправильно трактовано ... в будь-якому випадку - на питання відповіли не важливо яке правильне запитання: D
Jayx

16

Мені подобається рішення для сучасних браузерів, але кулі відсутні, тому я додаю це невелика хитрість:

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

введіть тут опис зображення


Тут ми можемо змінити колір предметів без зміни кольору кулі jsfiddle.net/HP85j/444
Jaider

3
Я думаю list-style-position: inside;, що краще рішення, щоб кулі демонструвалися належним чином.
Alexis Wilke

11

Ось можливе рішення:

Фрагмент:

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% тощо.


5

Це найпростіший спосіб зробити це. Тільки CSS

  1. додайте ширину елементу ul.
  2. додати дисплей: вбудований блок та ширина нового стовпця (має бути менше половини ширини 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>

2
Додайте пояснення з відповіддю, як ця відповідь допоможе ОП у вирішенні поточного питання
ρяσѕρєя K

4

Ви можете використовувати 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;
 }

3

Цього можна досягти, використовуючи властивість css-count-count у батьківському ділі,

подібно до

 column-count:2;

перегляньте це для отримання більш детальної інформації.

Як зробити плаваючий список DIV відображатись у стовпцях, а не у рядках


1
column-countне відображатиме елементи у правильному порядку. Наприклад, потрібний дисплей у першому рядку є A B(другий елемент слід додати праворуч), але якщо ви column-countйого використовуєте, він буде A E.
Паоло Моретті

2

Ви можете зробити це дуже легко за допомогою плагіна jQuery- Column, наприклад, щоб розділити ul з класом .mylist, який ви зробили б

$('.mylist').cols(2);

Ось живий приклад на jsfiddle

Мені це подобається краще, ніж з CSS, оскільки з рішенням CSS не все вирівнюється вертикально до вершини.


Цікаво, але він фактично розбиває <ul>список на кілька списків ... Це може ускладнити інші речі.
Алексіс Вілке

Насправді це було рішенням, яке я отримав після подяки, до нижньої позиції ця відповідь є дійсною, якщо ви читаєте питання ОП і не потрібно було DV.
Хитрий

2

ще одна відповідь через кілька років!

у цій статті: 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%; }

1

У 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/



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

як можливо, наприклад, генерувати два стовпчики, один містить плитку, а другий не упорядкований список?
Далек

Не зовсім впевнений, що ти маєш на увазі. Якщо у вас є ряд предметів із заголовками, ви можете помістити їх у єдиний список заголовків, предметів, заголовків, предметів, і тоді це повинно працювати для вас.
Том

1

Хоча я виявив, що Габріель відповів певною мірою, я виявив наступне, намагаючись упорядкувати список вертикально (перший ul AD та другий ul EG):

  • Коли в ul було парне число лі, то воно рівномірно не поширювалося по всьому
  • використовуючи стовпчик даних у ul, здається, не дуже добре, мені довелося поставити 4 для 3 стовпців, і навіть тоді він продовжував лише розповсюджувати li на 2 ul, що генерується JS

Я переглянув JQuery, щоб сказане, сподіваюся, не відбулося.

(function ($) {
    var initialContainer = $('.customcolumns'),
        columnItems = $('.customcolumns li'),
        columns = null,
        column = 0;
    function updateColumns() {
        column = 0;
        columnItems.each(function (idx, el) {
            if ($(columns.get(column)).find('li').length >= (columnItems.length / initialContainer.data('columns'))) {
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns() {
        columnItems.detach();
        while (column++ < initialContainer.data('columns')) {
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.customcolumns');
        updateColumns();
    }

    $(setupColumns);
})(jQuery);
.customcolumns {
  float: left;
  position: relative;
  margin-right: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="customcolumns" data-columns="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
  </ul>
</div>

-1

Цейд був ідеальним рішенням для мене, шукаючи його роками:

http://css-tricks.com/forums/topic/two-column-unordered-list/


3
«Завжди вказуйте найбільш відповідну частину важливої зв'язку, в разі , якщо цільової сайт недоступний або йде постійно відсутня» - stackoverflow.com/help/how-to-answer
Sk8erPeter

Немає потреби - це посилання / посилання на код, використаний Abdulу своїй відповіді, ідентичний навіть використаної ширині та ідентифікатору.
cssyphus
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.