1

多くの人が使用する標準のドロップ ダウン レイアウト、<ul>要素内にネストされた要素があり<li>ます。<li>ここに問題があります。これらの子要素を列に表示したいのです。20 個のアイテムがあると仮定すると、5 つの要素の 4 つの行が必要になります。私は<span>5 つのリスト項目の各グループの周りにタグを出力することでこれを行ってきましたが、スパンが順序付けられていないリストの直接の子として許可されていないことを愚かにも忘れてしまいました。例えば

<span class="col">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</span>

これは、視覚的には正常に機能しますが、明らかに検証されません。私はこれに対する解決策をたくさん探しましたが、真剣に立ち往生しています。これらのリスト項目を列に表示する方法を知っている人はいますか? 私はまた、要素が,<li>のみを親要素として持つ可能性があることを (知りませんでした) 読んだことがありますが、これは現時点ではあまり役に立ちません。私が考えることができる最高のものは次のとおりです。<ul><ol><menu>

<ul>
    <li></li>
    <li></li>
    <li>
        <ul><!--drop down with columns-->
            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>

            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>

            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>

            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

...これは HTML の非常に無駄に見えます。何か案は..？

ありがとう、ダン。

4

2 に答える 2

0

css を試してみてください。

行にクラスを追加します。

<li><!--column-->

何かのようなもの：

<li class="column"><!--column-->

次に、css ルールをどこかに追加できます。

.column{
 float:left;
}

これでうまくいくはずです。

編集：問題を理解しているかどうかはまだわかりませんが、もう一度やり直します:)

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

.column{
 float:left;
}

float div を使用すると、html コードの無駄が少なくなりますか? （私には、ネストされたliが完璧に見えるからです）。

于 2013-11-12T11:07:01.257 に答える