html - 如何优雅地对齐复选框

Question

所以，这里是代码片段：http: //jsfiddle.net/q4ZNc/

请花点时间运行该代码片段。

我想做的是下面的绿色框。每个复选框都可以展开，使其能够与上方框的边框对齐...

所以..不是那个文本必须传播......就像：

如果目前是这样

 <--------------------------Header above-------------------------------------->
   <---c1----><---c2----><----c3-----><----c4--->

我希望上面是..

 <-------c1-------><------c2------><--------c3---------><-------c4------>[Submit]

对不起，我可能弄乱了间距。但基本上等距间距。

我是新手.. 从过去一个小时以来一直在尝试解决这个问题，并决定将其发布在这里。有什么建议么。谢谢

score 2 · Accepted Answer

我div.inputContainer在每个输入周围添加了一个，将其居中对齐并将其设置width:20%为有 5 个输入。

要根据复选框的数量使其动态化，您需要编写一些脚本。这是一个使用 JQuery 的示例：

var inputContainers = $('.inputContainer');
inputContainerLength = inputContainers.length;
inputContainers.width(100 / inputContainerLength + '%');

score 1 · Accepted Answer

您可以将输入显示为table-cell，将它们全部包装在呈现为的 div 中table-row，并将display-table100% 宽度放在容器 ( .checklist) 上。

这将迫使浏览器均匀分布单元格

2 回答 2