Как сделать список <ul>таким?

Question

Я новый веб-дизайнер и создаю сайт с таким списком

Посмотреть это изображение (я не могу добавить изображение, о котором идет речь, потому что мне нужно 10 повторений)

http://shup.com/Shup/379626/11068201228-My-Desktop.png

альтернативный текст http://stashbox.org/947532/11068201228-My-Desktop.png

Как создать список, подобный этому, если я хочу сохранить один <ul> Возможно ли это?

Answer 1

Это возможно, плавая все ваши элементы li и устанавливая ширину ваших элементов ul и li.Порядок отображения будет1 23 45 6если вы используете этот метод.

Answer 2

Вот самый простой CSS, который вы можете использовать для выполнения того, о чем говорит greg0ire:

<ul class='myList'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.myList { width : 300px; }
.myList li { float: left; width: 150px; }

Конечно, как уже упоминалось, это не создаст подобный газетному столбцу формат. Это будет плавать слева направо, прежде чем выскочить вниз.

Для многостолбцовых форматов вам придется либо использовать устройство, которое поддерживает CSS3, либо использовать javascript.

В новых версиях Firefox, CSS может работать так:

.myList{
  -moz-column-count:3;
}

Answer 3

Проверьте это, чтобы сделать списки из нескольких столбцов: http://www.alistapart.com/articles/multicolumnlists/

Для пользовательских маркеров необходимо изменить определенное свойство стиля:

list-style-image: url(someimage.gif);

Проверьте эту ссылку для более подробной информации: http://www.alistapart.com/articles/taminglists/

найдите раздел под названием «Маркеры».