10个复选框和标签 - 左边5要5，右边有剩余空间

Question

所以我有10个复选框，每个标签都取自数组中的相应索引。我使用ng-repeat来显示它们：

<div ng-repeat="entity in entityArray | filter:entity">

        <label>
          <input style="display: inline-block; margin-top: 5px" type="checkbox" ng-model="entityChecked" ng-change="getEntityFromModal(entity, entityChecked)" />
                <a>{{entity}}</a>
        </label>
</div>

如何在左侧显示5，在右侧显示5？最好是我只使用一个阵列和一个div的解决方案。

Answer 1

如果您不想再使用div，可以使用以下内容：

label:nth-child(-n+5) {
    float: left;
}

input:nth-child(n+6) {
    float: right 
}

哪个会浮动前5个左边，之后的任何一个将浮动到右边。

但是，我建议将text中的前5个包装为text-align：left，将另外5个包装在div中，使用text-align：right然后将两个div设置为50％宽度。但这只是因为我不喜欢使用花车。

修改 澄清这个答案会产生类似

的结果

[][][][][]            [][][][][]

而不是

[]     []
[]     []
[]     []
[]     []
[]     []

要实现这一点，我们可以稍微修改代码并使用

label:nth-child(2n):after {
    display: block;
    width: 100%;
    height: 1px;
    content : "";
}

Answer 2

如果您不介意订购

1 2
3 4
4 5
...

而不是

1 6
2 7
3 8
4 9
5 10

你可以这样做：

.container {
    width: 500px;
}
.cb {
    float: left;
    
    width: 48%;
    margin-right: 2%;
    margin-bottom: 5px;
}

<div classs="container">
    <label class="cb">
        <input type="checkbox" />
        <a>entity name</a>
    </label>
    <label class="cb">
        <input type="checkbox" />
        <a>entity name</a>
    </label>
    <label class="cb">
        <input type="checkbox" />
        <a>entity name</a>
    </label>
    <label class="cb">
        <input type="checkbox" />
        <a>entity name</a>
    </label>
</div>

Answer 3

我仍然选择Flex。

＆＃13;

＆＃13;

.container {
    width: 500px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.cb {
    align-self:auto;
    width: 50%;
}

＆＃13;

<div class="container">
    <label class="cb">
        <input type="checkbox" />
        <a>entity name 1</a>
    </label>
    <label class="cb">
        <input type="checkbox" />
        <a>entity name 2</a>
    </label>
    <label class="cb">
        <input type="checkbox" />
        <a>entity name 3</a>
    </label>
    <label class="cb">
        <input type="checkbox" />
        <a>entity name 4</a>
    </label>
</div>

＆＃13;

＆＃13;

＆＃13;