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

因此，这是代码片段：
http://jsfiddle.net/q4ZNc/

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

我要尝试做的是下面的绿色框。每个复选框可以散开以使其能够与上面的框的边界对齐...

所以..文本不必散开……

如果目前是这样

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

我希望以上是..

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

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

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

最佳答案

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

Fiddle

为了使它基于复选框的数量而动态，您需要做一些脚本编写。这是使用JQuery的示例：

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

Fiddle