Столбцы CSS(3), несколько ul

Я работаю над сайтом с горизонтальной прокруткой. Элементы на сайте размещены в структуре UL > LI для создания нескольких блоков.

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу 2 набора UL друг за другом, но они будут перекрываться. Пытался найти это в Интернете, но никто не сделал то, что я сделал.

И пример того, что я пытаюсь сделать, можно найти здесь: http://jsfiddle.net/DHbtx/2/ Там вы увидите, что 2 UL перекрываются из-за "float: left" и отсутствия блочных элементов. я пытался добавить псевдоэлемент :after, но не работал (из: проблема с колонкой с горизонтальной прокруткой)

li:last-of-type:after {
  content: '';
  display: block;
  width: 15px;
  height: 1px;
  float: right;
  margin-right: -15px;
  margin-top: -1px;
}

Может ли кто-нибудь помочь мне с этой проблемой? Я очень ценю любую помощь, которую вы можете предоставить.


css multiple-columns pseudo-element
person stbeets    schedule 02.07.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте указать ширину элементов ul, скажем, 50%.

ul
{
  width: 50%;
  ...
}

FIDDLE

person Danield    schedule 02.07.2013
comment
Спасибо за ваш ответ. Проблема в том, что я не знаю, какой длины будут оба UL, сколько предметов будет в них. Это все изменчиво... - person stbeets; 02.07.2013