Группировка и позиционирование элементов списка (LI)

Question

Допустим, у меня есть следующий список:

<ul> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 

<li>item4</li> 
<li>item5</li> 
<li>item6</li> 

<li>item7</li> 
<li>item8</li> 
</ul> 

и мне нужно это, чтобы показать, как это на веб-странице:

item1 item2 item3 
item4 item5 item6 
item7 item8 

Как бы я выполнить это ? легко ли это сделать с CSS или есть какой-то волшебный трюк PHP?

Ive получил несколько ответов, но все они выглядят так же, как мое решение, но он должен взять 870px и быть заказанным как таковой, а также я использую bootstrap. поэтому не реагирует на отсутствие таблиц и т. д.

Любая помощь Большое спасибо Спасибо.

Answer 1

Woudn`t с использованием таблиц стилей следующим образом достаточно?

ul{ 
    width: 870px; 
} 
li{ 
    width: 33.33%; 
    float: left; 
} 

870px используется, потому что автор утверждает, что значение в вопросе. Это может быть и любая другая ценность.

Answer 2

Это действительно вещь CSS. Прочтите следующее: http://alistapart.com/article/css-floats-101.

Answer 3

Посмотрите на этой странице

http://d.alistapart.com/multicolumnlists/example1.html

Надеется, что это помогает

Answer 4

Рассмотрите возможность использования HTML таблицы без границ.

Answer 5

Если вам нужно только, чтобы отобразить 3 элемента в ряд, а затем CSS :nth-child поможет:

li:nth-child(3n-1) { 
    clear: both; 
} 

Примечание: это не будет работать в IE8 и ниже

А вот немного в JavaScript/JQuery для IE8 и IE7 поддержки:

if (document.all && !document.querySelector || document.all && document.querySelector && !document.addEventListener) { 
    $("li").each(function (index) { 
     if (index % 4 === 0) 
     $(this).css('clear', 'both'); 
    }); 
}; 

Answer 6

Этот CSS работает для меня. Подстройте ширину, соответствующую вашим потребностям.

ul 
    { 
    width: 500px; 
    } 

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

Link to a live demo.

Answer 7

Попробуйте установить ширину неупорядоченного списка

<style> 
ul{ 
    width: 30em;//<<< 
} 

ul li{ 
    float: left; 
    width: 10em; 
} 
</style> 
<ul> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
    <li>item4</li> 
    <li>item5</li> 
    <li>item6</li> 
    <li>item7</li> 
    <li>item8</li> 
</ul> 

В действии: http://jsfiddle.net/zsLUa/

Answer 8

Другие решения будут идти с collumns.

ul{ 
-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 
}