Как я могу разбить <li>элементов по вертикали - PullRequest
Новая
       27

Как я могу разбить <li>элементов по вертикали

1 голос
/ 07 февраля 2012

У меня есть список <li> элементов, где <ul> имеет фиксированный размер 150px (высота) и 400px (ширина)

Как ты сегодня

Original

Как бы я хотел остаться:

Objetive

ПРИМЕЧАНИЕ. Этот список является динамическим!

Спасибо всем за помощь

Ответы [ 8 ]

3 голосов
/ 14 сентября 2015

Возможно ответ на старый пост. Но если вы хотите, чтобы элементы списка были динамическими и состояли из 4 столбцов, вы можете использовать это в CSS. 

div {
    -webkit-columns: 100px 4; /* Chrome, Safari, Opera */
    -moz-columns: 100px 4; /* Firefox */
    columns: 100px 4;
}

Оберните div вокруг <ul> и затем используйте этот CSS.

Рабочая ДЕМО

3 голосов
/ 07 февраля 2012

Вы не можете.

LI s идут вертикально или горизонтально, они не переносятся на новые столбцы.

Если вы хотите списки, как показано на рисунке, вам нужно использовать несколько UL s и перемещать их.

Если ваши LI включены в большой длинный список, вы можете написать JavaScript, который разбит их на несколько UL. CSS не может сделать это сам по себе.

1 голос
/ 07 февраля 2012

извините, что разочаровал, но вам нужно разбить список на три части, 

<ul>
 <li></li>
 ...
</ul>

<ul>
 <li></li>
 ...
</ul>

<ul>
 <li></li>
 ...
</ul>

установить ширину для элементов ul и позволить им плаватьдолжно быть ясно: слева;

1 голос
/ 07 февраля 2012

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

В любом случае, если контент создается на стороне сервера, вы можете разделить его на столбцы.В противном случае вы можете сделать это на стороне клиента с помощью JavaScript.Если вы не возражаете против jQuery, что-то вроде Masonry может выполнить всю тяжелую работу.

0 голосов
/ 07 февраля 2012

Поскольку вы знаете размеры в пикселях элементов UL и LI, вы можете легко расположить LI, по крайней мере, теоретически.Например: 

<!DOCTYPE html>
<html>
<head>
<title>example<title>
<style type="text/css">
ul { border : 2px solid blue ; height : 200px }
li { height : 25px; }
li:nth-child(9),
li:nth-child(17),
li:nth-child(25), 
li:nth-child(33) {
  margin-top : -200px
}
li:nth-child(8)  ~ li { margin-left : 150px }
li:nth-child(16) ~ li { margin-left : 300px }
li:nth-child(24) ~ li { margin-left : 450px }
li:nth-child(32) ~ li { margin-left : 600px }
</style>
</head>
<body>
<ul>
  <li>LI number 1</li>
  <li>LI number 2</li>
  ...
  <li>LI number 36</li>
</ul>
</body>
</html>

Блок UL будет иметь высоту только самого последнего столбца, поэтому вам необходимо явно установить его высоту.

0 голосов
/ 07 февраля 2012

Если вы думаете о своей проблеме немного креативно, тогда существует относительно простое решение.

Вы должны просто решить, сколько у вас li в максимуме в одном столбце. Когда вы получаете ваши данные динамически, то вы можете напрямую создавать UL динамически. Это может быть достигнуто на стороне сервера, а также на стороне клиента без проблем.

0 голосов
/ 07 февраля 2012

Вы могли бы просто выпустить их ... 

li { float: left; width: 200px; }

DEMO

или используйте inline-block .... 

li { display: inline-block; width: 200px; }

Демо

В результате элементы списка отображаются горизонтально, а не вертикально. Если вы хотите, чтобы элементы списка оставались в списке по вертикали, вам необходимо использовать несколько контейнеров (ul) для каждого списка.

0 голосов
/ 07 февраля 2012

вы можете использовать свойство css display. 

ul li {
display: inline-block;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...