5

次のようにPHPで水平動的ulリストを作成しました：

List1 List2 List3 List4 List5 List6 List7 List8 List9 List10

3 つのリストごとに新しい行を作成する方法はありますか? したがって、結果は次のようになります。

List1 List2 List3

List4 List5 List6

List7 List8 List9

List10

ul幅を調整して、リストを上記のように表示できることを知っています。

しかし、私が欲しいのは、3 つのリストごとに新しい行を作成することです。PHP、CSS、または JavaScript でこれを行うことができますか? 誰でも助けることができますか？

4

5 に答える 5

10

どうですか -

li {
  width: 33%;
  float: left;
  list-style: none;
}

各要素の幅を使用可能なスペースの 3 分の 1 に設定すると、ブラウザーが次の要素を新しい行にプッシュする前に、すべての行にli3 つの float を収めることができます。li

float: leftおそらくステートメントを交換しdisplay: inlineて、同じ効果を得ることができると思います。

于 2013-01-31T10:25:21.557 に答える
4

リストアイテムのサイズが固定されていない場合は、jQueryを使用して簡単に行うことができます。

$('li:nth-child(3n)').next().css({'clear': 'both'});

これは3つおきの要素を取り、次の要素にクリアを追加します。そうです..リストアイテムのサイズに関係なく、3番目の要素ごとに次の行に移動します。

于 2013-01-31T08:54:23.043 に答える
1

すべての<li>幅を設定する必要があります-たとえばwidth: 100px;、 for <ul>set width: 300px。

ul, li {
  margin: 0;
  padding: 0;
}
ul {
  width: 300px;
}
li {
  width: 100px;
  float: left;
  list-style: none;
}
于 2013-01-31T08:49:05.700 に答える
0

css ではなく PHP でこれを行いたい場合 (@hsz が提案したように)、ul最大 3 個liの を含む に分割できます。

<ul class="...">
<?php
$i = 1;
$array = (/* 10 items */);
foreach ($array as $item) {
    if ($i % 3 == 0) { echo '</ul><ul>'; }
    echo "<li>{$item}</li>";
    $i ++;
}
?></ul>
于 2013-01-31T08:53:01.697 に答える