Question

我对CSS并不擅长。我不确定如何将列中的复选框与其下面的子复选框对齐作为分层表示。例如，我将国家/地区及其各自的状态显示在层次结构中，但在列中显示如下图所示。

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

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

enter image description here

请在下面找到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/

对齐分层复选框

1 个答案: