对齐分层复选框

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/