对齐分层复选框

Question

我不擅长CSS。我不确定如何将列中的复选框与其下方的子复选框对齐作为分层表示。例如，我有一些国家和他们各自的州显示在层次结构中，但在列中，如下图所示。

我不确定如何使用代码对齐它。我从服务中获取分层数据，但无法按照以下格式对齐。

我尝试使用边距、浮动，但无法正确设置布局格式。

请在下面找到 HTML 标记：

<div id="CountryList" style="display: block; width: 100%;">
<div style="display: inline;">
    <div style="display: block;">
        <input type="checkbox" class="country-parent" />United States of America
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />New York
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Iowa
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Texas
    </div>
</div>
<div style="display: inline;">
    <div style="display: block;">
        <input type="checkbox" class="country-parent" />Australia
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />New South Wales
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Queensland
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Victoria
    </div>
</div>
<div style="display: inline;">
    <div style="display: block;">
        <input type="checkbox" class="country-parent" />India
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Andhra Pradesh
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Tamilnadu
    </div>
    <div style="display: block;">
        <input type="checkbox" class="country-child" />Karnataka
    </div>
</div>

非常感谢这方面的任何帮助。

Answer 1

应该是你需要的。看到我删除了你所有的内联样式，你也不需要 .country-parent 和 .country-child 类。如果您不需要它们用于其他用途，请将其移除。

#CountryList > div 与 HTML

.country-parent

#CountryList > div > div 与 HTML

.country-child

+ div是兄弟选择符，表示the second one and each other。我用它在 cols（缩进第二个和第三个父级 div）和缩进子级之间形成间隙。

<style>
    #CountryList > div {float: left;}
    #CountryList > div + div {margin-left: 30px;} /* gap between columns */
    #CountryList > div > div + div {margin-left: 30px;} /* indent hierarchy */
</style>

<div id="CountryList">
    <div>
        <div>
            <input type="checkbox" class="country-parent" />United States of America
        </div>
        <div>
            <input type="checkbox" class="country-child" />New York
        </div>
        <div>
            <input type="checkbox" class="country-child" />Iowa
        </div>
        <div>
            <input type="checkbox" class="country-child" />Texas
        </div>
    </div>
    <div>
        <div>
            <input type="checkbox" class="country-parent" />Australia
        </div>
        <div>
            <input type="checkbox" class="country-child" />New South Wales
        </div>
        <div>
            <input type="checkbox" class="country-child" />Queensland
        </div>
        <div>
            <input type="checkbox" class="country-child" />Victoria
        </div>
    </div>
    <div>
        <div>
            <input type="checkbox" class="country-parent" />India
        </div>
        <div>
            <input type="checkbox" class="country-child" />Andhra Pradesh
        </div>
        <div>
            <input type="checkbox" class="country-child" />Tamilnadu
        </div>
        <div>
            <input type="checkbox" class="country-child" />Karnataka
        </div>
    </div>
</div>

https://jsfiddle.net/m6hhn1da/

对齐分层复选框

aligning hierarchical checkboxes

html

css

checkbox