私が次のリストを持っているとしましょう：
<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トリックがありますか？
私はいくつかの答えを受け取りましたが、それらはすべて私の解決策に基づいているようですが、870pxを取り、そのように注文する必要があり、また私はブートストラップを使用しています。レスポンシブなテーブルなどはありません。
どんな助けでも大いに感謝しますありがとう。
次のようにcssスタイリングを使用するだけで十分ではありませんか？
ul{
width: 870px;
}
li{
width: 33.33%;
float: left;
}
著者が質問でその値を述べているため、870pxが使用されました。これは他の値でもかまいません。
順序付けされていないリストの幅を設定してみてください
<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/
3つのアイテムを続けて表示する必要がある場合は、css:nth-childが役立ちます。
li:nth-child(3n-1) {
clear: both;
}
注：IE8以下では機能しません
そして、IE8とIE7をサポートするためのjavascript/jQueryのビットは次のとおりです。
if (document.all && !document.querySelector || document.all && document.querySelector && !document.addEventListener) {
$("li").each(function (index) {
if (index % 4 === 0)
$(this).css('clear', 'both');
});
};
それは本当にCSSのことです。これを読んでください：http：//alistapart.com/article/css-floats-101。
境界線のないhtmlテーブルの使用を検討してください。
このCSSは私のために働きます。ニーズに合わせて幅を微調整します。
ul
{
width: 500px;
}
li
{
display:inline-block;
width: 160px;
}
別の解決策は、列を使用することです。
ul{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}