分組和定位列表項目（LI）

可以說我有以下列表：分組和定位列表項目（LI）

<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技巧？

我收到了一些答案，但他們似乎基於我的解決方案，但它需要採取870像素，並訂購，因此我也使用bootstrap。所以響應沒有表等..

任何幫助非常感謝。

來源

2013-03-07 Dawid van der Hoven

Woudn`t使用CSS樣式如下就夠了嗎？

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

使用870px因爲作者聲明該問題中的值。這也可以是其他任何值。

來源

2013-03-07 13:29:54 Michael

我想補充0.33至寬度（33.33％），以提高精度。我認爲這是一個比l̕aͨŵƦȆ̴̟̟͙̞ͩ͌͝ƞCͭ̏ȇƐȓhƐȓ0nè's更好的解決方案，因爲您只需要調整一個值來增加/減少列數。 – Mark 2013-03-07 13:42:15

好點 - 不好改變它。這應該足夠http：// stackoverflow。com/a/5158996/1285871 – Michael 2013-03-07 13:46:01

這真的是一個CSS的東西。閱讀：http://alistapart.com/article/css-floats-101。

來源

2013-03-07 13:25:58

在本頁面

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

希望它可以幫助

來源

2013-03-07 13:26:58 l0ckm4

考慮使用HTML表格沒有邊界看一看。

來源

2013-03-07 13:28:35

或者，如果你想在列表類型遵循以下=答案） – 2013-03-07 13:29:48

如果您只需要在一排顯示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'); 
    }); 
};

來源

2013-03-07 13:28:46 Morpheus

此CSS適用於我。調整寬度以適應您的需求。

ul 
    { 
    width: 500px; 
    } 

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

Link to a live demo。

來源

2013-03-07 13:31:15

嘗試設置無序列表

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

來源

2013-03-07 13:32:59

請參閱更新 – 2013-03-07 13:42:23

只需更改寬度的值，如果您希望寬度爲870像素，則將width：30em;改爲width：870px; 870/3 = 290， width：10em;'to'width：290px;' – 2013-03-07 13:55:09

另一種解決方案會去collumns。

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

來源

2013-03-07 13:54:53

分組和定位列表項目（LI）

回答

相關問題