並排對齊兩組複選框

Question

您好我正在嘗試將兩組複選框並排排列，並使複選框很好地對齊，但是每次我都將複選框並排放置在右側時，會變得很糟糕向上取決於文本大小左側

所以我不知道是否有一種方法

這裏是代碼

UPDATE斷碼。

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不應內聯。但我希望你明白我的意思。