并排对齐两组复选框

Question

您好我正在尝试将两个复选框并排对齐，并使复选框很好地对齐，但每次我得到并排的复选框时，右侧的复选框将取决于文本大小左

所以我想知道是否有办法

这是代码

更新破产代码。

http://jsfiddle.net/Ysf7t/1/

Answer 1

最简单的方法是通过CSS将名称（即“足球”，“梅赛德斯”等）赋予固定宽度。

基本上是这样的：

<h1>Sports</h1>

<div>
    <input type='checkbox' name='system_type17' value='2' />
    <input type="checkbox" name="system_type3" value="5" />
    <span style="width:100px;display:inline-block;">Soccer</span>
    <input type='checkbox' name='system_type17' value='2' />
    <input type="checkbox" name="system_type3" value="5" />
    <span style="width:100px;display:inline-block;">Mercedes</span>
</div>           
<div>
    <input type='checkbox' name='system_type18' value='3' />
    <input type='checkbox' name='system_type4' value='4' />
    <span style="width:100px;display:inline-block;">Mercedes</span>
    <input type="checkbox" name="system_type7" value="2" />
    <input type="checkbox" name="system_type8" value="3" />
    <span style="width:100px;display:inline-block;">Mercedes</span>
</div>

当然，理想情况下，CSS不应该是内联的。但我希望你明白我的意思。