html - 复选框排成一行

Question

请耐心等待，因为我对前端设计不是很精通。我怎样才能让下面的复选框像图片一样整齐地排列和堆叠？

现在我将它们排成一行 9 个复选框，但它们没有对齐，并且根据文本的长度间隔开。

如图所示: JSFiddle

HTML:

<div class="tags">
<div class="col">
<label>
    <input type="checkbox" rel="accounting" />Accounting</label>
<label>
    <input type="checkbox" rel="courier" />Courier</label>
<label>
    <input type="checkbox" rel="project-management" />Project Management</label>
<label>
    <input type="checkbox" rel="video-games" />Video Games</label>
<label>
    <input type="checkbox" rel="dentistry" />Dentistry</label>
<label>
    <input type="checkbox" rel="librarian" />Librarian</label>
<label>
    <input type="checkbox" rel="programmer" />Programmer</label>
<label>
    <input type="checkbox" rel="architect" />Architect</label>
</div>
<div class="col">
<label>
    <input type="checkbox" rel="photographer" />Photographer</label>
<label>
    <input type="checkbox" rel="it" />IT</label>
<label>
    <input type="checkbox" rel="artist" />Artist</label>
<label>
    <input type="checkbox" rel="web-developer" />Web Developer</label>
<label>
    <input type="checkbox" rel="web-designer" />Web Designer</label>
<label>
    <input type="checkbox" rel="neurologist" />Neurologist</label>
<label>
    <input type="checkbox" rel="veterinarian" />Veterinarian</label>
<label>
    <input type="checkbox" rel="teacher" />Teacher</label>
</div>
<div class="col">
<label>
    <input type="checkbox" rel="character-animator" />Character Animator</label>
<label>
    <input type="checkbox" rel="salesman" />Salesman</label>
<label>
    <input type="checkbox" rel="telemarketing" />Telemarketeing</label>
<label>
    <input type="checkbox" rel="construction" />Construction</label>
<label>
    <input type="checkbox" rel="lawyer" />Lawyer</label>
<label>
    <input type="checkbox" rel="actor" />Actor</label>
<label>
    <input type="checkbox" rel="policeman" />Policeman</label>
<label>
    <input type="checkbox" rel="forestry" />Forestry</label>
</div>
</div>
<!-- end tags -->

CSS:

.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
float: left;
}
.col {
width: 100%;
display: block;
margin-right: 10px;
}

label{
vertical-align: top;
float: left;
width: 160px;
}

编辑

Answer 1

我会使用表格布局。只需添加以下 CSS:

.tags {
    display: table;
}
.col {
    display: table-row;
}
.col label {
    display: table-cell;
}

更新 fiddle :http://jsfiddle.net/5sz6qdos/13/

其他人可能会使用 flexbox 但我自己从未使用过，所以不确定如何实现。

但是，我可能会走不同的路线，使其更具语义并设置得更加灵活:

<ul class="tags">
    <li class="tag"><label>...
    ....<!--put ALL of your label elements in a single parent element-->
</ul>

和

.tag {
    display: block;
    float: left;
    width: 25%; /*for if you want 4 columns, or*/
    width: 120px; /*if you want specific widths*/
}
.tags:after { content: ""; display: table; clear: both; } /*clearfix*/

使用百分比将调整所有列，或者使用固定像素将允许元素流动(我的偏好)。