Html 10个复选框和标签-左侧5个，右侧5个，下方留有剩余空间

所以我有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>

{{entity}}

---

如何在左侧和右侧分别显示5和5？最好是只使用一个数组和一个div的解决方案。

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

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

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

它将使前5个向左浮动，之后的任何一个都将向右浮动

但是，我建议在div中使用text align:left包装前5个div，在div中使用text align:right包装其他5个div，然后将两个div的宽度设置为50%。但这只是因为我不赞成使用浮动

编辑 澄清这个答案会导致类似的结果

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

而不是

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

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

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

---

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

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

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

它将使前5个向左浮动，之后的任何一个都将向右浮动

但是，我建议在div中使用text align:left包装前5个div，在div中使用text align:right包装其他5个div，然后将两个div的宽度设置为50%。但这只是因为我不赞成使用浮动

编辑 澄清这个答案会导致类似的结果

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

而不是

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

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

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

---

如果你不介意点餐的话

1 2
3 4
4 5
...

而不是

1 6
2 7
3 8
4 9
5 10

您可以简单地执行以下操作：

.container{
宽度：500px；
}
.cb{
浮动：左；
宽度：48%；
保证金权利：2%；
边缘底部：5px；
}

实体名称
实体名称
实体名称
实体名称

如果您不介意订购

1 2
3 4
4 5
...

而不是

1 6
2 7
3 8
4 9
5 10

您可以简单地执行以下操作：

.container{
宽度：500px；
}
.cb{
浮动：左；
宽度：48%；
保证金权利：2%；
边缘底部：5px；
}

实体名称
实体名称
实体名称
实体名称

我还是会选择Flex

.container{
宽度：500px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.cb{
自对准：自动；
宽度：50%；
}

实体名称1
实体名称2
实体名称3
实体名称4

我还是会选择Flex

.container{
宽度：500px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.cb{
自对准：自动；
宽度：50%；
}

实体名称1
实体名称2
实体名称3
实体名称4

根据您必须支持的内容，我会选择支持。根据您必须支持的内容，我会选择支持。我知道，问题是我需要两个数组来保存标签的值（通过代码定期更改），并且两个单独的ng重复，每个div重复一次？你还会建议不要按照你描述的方式使用浮动吗？我反对浮动的建议是基于人们在任何地方都无缘无故地使用浮动。事实上，你有一个合理的理由，也就是说，它会涉及到逻辑上的变化，而没有，我认为float会很好。我想我会选择这个解决方案（有选择是多么好，谢谢大家），因为它维护了我的javascript结构，这一点很重要，因为在将来它可能会被改变，这样UI就会有一个实体输入。但是，在我的页面中，我有多个输入，这是对所有输入的格式化？是的，这样做可以，您需要将一个类添加到父div（带有ng repear的div），然后使用.newClassName标签：n子（-n+…啊，太好了，谢谢@samuelmr，因为你可能已经猜到我的css是非常基本的。我明白，问题是我需要两个数组来保存标签的值（通过代码定期更改），和两个单独的ng重复，每个div一个？你仍然建议不要按你描述的方式使用float吗？我建议不要使用float是基于人们在任何地方都没有理由地使用它。因为你实际上有一个合法的理由，也就是说，它会涉及逻辑上的变化，没有，我认为float会很好。我想我会同意这一点解决方案（有选择是多么好，谢谢大家），因为它维护了我的javascript结构，这一点很重要，因为在将来它可能会被更改，以便UI将有一个实体输入。但是在我的页面中，我有多个输入，这是对所有输入的格式化？是的，可以，您需要向父div添加一个类（带有ng repear的div），然后使用.newClassName标签：n子级（-n+…啊，太好了，谢谢@samuelmr，因为你可能已经猜到我的css非常基本。对flex的支持不是很好，你不必使用它来实现这一点。这取决于他必须支持的浏览器版本。如果支持的话，这是一个简单、干净和高度响应的解决方案。看，对flex的支持不是很好，你不必使用它要实现这一点，这取决于他必须支持的浏览器版本。如果支持，这是一个简单、干净、响应速度快的解决方案。请参阅，