代码之家 › 专栏 › 技术社区 › Makram Saleh

嵌套ULs包装

actionscript javascript

0

Makram Saleh · 技术社区 · 16 年前

left-margin 基于嵌套级别的值。

之前:

<ul>
    <li>Item one</li>
    <li>Item two:
        <ul>
            <li>One</li>
            <li>Two
                <ul>
                    <li>One</li>
                    <li>Two</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item three
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </li>
    <li>Item four</li>
</ul>

之后:

<span style="left-margin:0px">
    <ul>
        <li>Item one</li>
        <li>Item two:
            <span style="left-margin:30px">
                <ul>
                    <li>One</li>
                    <li>Two
                        <span style="left-margin:60px">
                            <ul>
                                <li>One</li>
                                <li>Two</li>
                            </ul>
                        </span>
                    </li>
                </ul>
            </span>
        </li>
        <li>Item three
            <span style="left-margin:30px">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                </ul>
            </span>
        </li>
        <li>Item four</li>
    </ul>
</span>

3 回复 | 直到 16 年前

1

0

Gabriele Petrioli 16 年前

因为它们是嵌套的,所以边距不必增加。。每一个都从其嵌套级别开始,因此它将添加到当前边距中。。

放 left-margin:30px; 所有的人都应该这么做。。

2

0

Oscar Kilhed 16 年前

也许是这样。将嵌套列表放在某个容器元素中,并在该容器元素上运行以下操作:

function recursiveIndentation(element, indentation, increasingIndentation) {
    for (var i = 0; i < element.childNodes.length; i = i + 1) {
        if (element.childNodes[i].nodeName === "UL") {
            var span = document.createElement("SPAN");
            span.style.marginLeft = indentation + "px";
            element.insertBefore(span, element.childNodes[i])
            span.appendChild(element.childNodes[i + 1]);
            recursiveIndentation(span.childNodes[0], indentation + increasingIndentation, increasingIndentation);
        } else {
            recursiveIndentation(element.childNodes[i], indentation, increasingIndentation);
        }
    }
}

3

0

Wim 16 年前

ul { margin-left: 0 }
ul ul { margin-left: 30px }
ul ul ul { margin-left: 60px }
ul ul ul ul { margin-left: 90px }