1

私はこのタイプの構造を持っています

<ul>
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

論理的にはすべてがこのように整理されていますが、すべてを 1 つのフラットに見えるリストに表示する必要があります。

ul,li からマージンとパディングを削除することでそれを行うことができますが、それは文字通り、li にパディングを含めることができないようにします。

すべてのリスト項目を 5px でパディングしたいのですが、単純にこれを行うと、実際には、ネストされた li が左側と上部で 10px インデントされます。 基本的には、このようにする必要があります。ネストされたリストを押し上げないパディングを設定する良い方法は何ですか。

基本的なhtml構造を自由に変更できますが、ネストを維持したいと思います。これにより、私が行っている他の多くのことが簡単になります(展開可能/非表示可能な子など)。

4

2 に答える 2

2

このCSS：

li {
    padding-left: 5px;
    padding-top: 5px;
}

li li {
    padding-left: 0px;
}

任意の深いネストされたリストを処理する必要があります。例としてjsfiddleを作成しました。(この例では、より明確にするために 15px のパディングを使用しています。)

于 2012-06-26T15:41:15.503 に答える
1

できることは、最上位の のみを選択し、CSS > セレクターを使用して<ul>その子 (孫ではない)要素のみに間隔を空けることです。<li>

たとえば、ID で最上位の要素を指定します。

HTML:

<ul id="Head">
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

CSS:

#Head > li
{
    padding-left: 5px;
}

そして、これが jsFiddleの例です。

于 2012-06-26T15:31:19.833 に答える