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

嵌套ULs包装

actionscript javascript

Makram Saleh · 技术社区 · 15 年前

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 回复 | 直到 15 年前

Gabriele Petrioli 15 年前

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

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

Oscar Kilhed 15 年前

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

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);
        }
    }
}

Wim 15 年前

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

推荐文章

nabster023 · 拉伸和旋转电影剪辑而不失真

7 年前

Dimentio · 无限循环(动作脚本3)

7 年前

Vladimir Shevyakov · 在Flex、ActionScript 3中动态显示文本

7 年前

seventeen · Actionscript 3:使用MouseEvent。单击并触摸事件。TOUCH\u轻触

7 年前

nabster023 · 自动检测AS3中输入文本字段的值

7 年前

nabster023 · 在新窗口中打开SWF文件

7 年前

Patrick Meehan · Actionscript 2“')”应为“错误”

7 年前

Larocque · 1084:语法错误:函数前应为右括号

7 年前

user979331 · ActionScript 3缩放和滚动问题

7 年前

guest343435 · 错误#2007:参数文本必须非空

7 年前