css - 如何使用 CSS 将嵌套 HTML 列表的输入控件缩进到单个列

Question

我有一个嵌套的 html 列表，每个元素都有一组关联的输入控件。我想将所有输入控件缩进单个列。下面给出一个例子

[b][b][c]  • Element_1
[b][b][c]     • Element_1.1
[b][b][c]        • Element_1.1.1
[b][b][c]        • Element_1.1.2
[b][b][c]     • Element_1.2
[b][b][c]  • Element_2
[b][b][c]  • Element_3

这里 [b] 表示一个按钮，[c] 表示一个复选框，而 • 表示以下元素的项目符号。

Answer 1

假设有以下 HTML（请在未来展示您的 HTML，图表对于交流标记的用处不如您想象的那么有用，尽管它们非常适合展示所需的最终结果）：

<ul>
    <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_1
        <ul>
            <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_1.1
                <ul>
                    <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_1.1.1</li>
                    <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_1.1.2</li>
                </ul>
            </li>
            <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_1.2</li>
        </ul>
    </li>
    <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_2</li>
    <li><span class="controls">
        <button>b</button>
        <button>b</button>
        <input type="checkbox" />
    </span>Element_3</li>

然后下面的 CSS 似乎如你所愿：

ul {
    position: relative;
    margin-left: 6em;
}

ul ul {
    position: static;
    margin-left: 0;
}

li {
    padding: 0.5em 0;
    line-height: 1.5em;
}

span.controls {
    position: absolute;
    width: 6em;
    right: 100%;
}

span.controls * {
    display: inline;
}

JS 小提琴演示。

Answer 2

display:list-item;为你使用input来达到这个效果。

Answer 3

如果您可以更改标记，则可以将它们分成单独的列表：

<ul>
    <li>Element_1</li>
        <ul>
            <li>Element_1.1</li>
                <ul>
                    <li>Element_1.1.1</li>
                    <li>Element_1.1.2</li>
                </ul>    
            <li>Element_1.2</li>
        </ul>
    <li>Element_2</li>
    <li>Element_3</li>
</ul>

演示