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

Question

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

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

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

所以.. 不必将文本展开...类似于:

如果现在是这样

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

我希望上面的是..

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

抱歉，我可能弄乱了间距。但基本等间距。

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

Answer 1

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

Fiddle

要根据复选框的数量使其动态变化，您需要编写一些脚本。下面是一个使用 JQuery 的例子:

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

Fiddle