移动设备手风琴菜单的CSS

我正在尝试为一个移动站点获取手风琴菜单。它看起来如下所示

下面是我正在使用的用于菜单的css

。手风琴锚{
浮动：左；
宽度：50%；
填充：0.8em；
左边框：1px实心#258ecd；
颜色：白色；
文字装饰：无；
字体大小：12px；
线高：20px；
显示：块；
填充：0 15px；
过渡：均为0.15秒；
边框底部：1px实心#808080；
背景：黑色；
}

---

代码的问题是，浮点元素的高度不均匀，因此每一行都会占用其任意列的最大高度，因此下一行总是在某个空格后出现。了解更多关于这个问题的信息

所以为了解决你的问题，我假设你总是需要2列，所以我们将屏幕分成两个垂直空间，然后在每个垂直空间中平均分配这些复选框

你可以查一下

代码片段

菜单{
显示：内联块；
宽度：100%；
背景：#000；
}
.向左拉{
浮动：左；
宽度：50%；
}
.手风琴锚{
左边框：1px实心#258ecd；
颜色：白色；
文字装饰：无；
字体大小：12px；
线高：20px；
显示：块；
填充：0 15px；
左侧填充：20px；
过渡：均为0.15秒；
边框底部：1px实心#808080；
背景：黑色；
}
.手风琴锚。手风琴复选框{
位置：绝对位置；
左边距：-15px；
}

请同时显示您的html。您是否能够提供实时版本或codepen/jsiddle？请在这里的手风琴菜单元素上附加。您的html表示您正在使用AngularJS。这里的代码片段不能让我们实际看到菜单在DOM中的样子（因为它不能正确呈现）。一个活生生的例子将对我们有很大帮助。您是如何得出复选框的位置导致问题的结论的？请看图片，您可以看到复选框和边框之间有空格，但在代码中，复选框是标记的第一个子项，剩余的文本是标记的一部分，与复选框无关，因为它们是在复选框之后写入，因此它们将显示在复选框之后；一旦赋予复选框位置，绝对文本就不再依赖于任何其他元素。@Atakishore根据您的建议更改css后，我已附加了该图像。@SNT请检查更新的答案和JSFIDLE链接。我想这会解决你的问题，也可以阅读这个答案，了解是什么导致了这个问题。当你在div中已经有了一个元素列表，并且你可以安排它时，这会很好。在我的例子中，我将把元素作为json字符串输入，然后在accordion菜单中使用。