我试图在水平和垂直方向设置一个复选框的集合,但它们并不是统一出来的。每个复选框的标签大小可能不同,例如一个复选框的标签上写着“国际Casaulty条约”,而另一个只标注WIP。
我在这里看过这个垂直的例子。 http://jsfiddle.net/zcuLgbxt/
如何整齐地排列它们,使它们在垂直和水平方向都是一致的?首先十分感谢!
这是我简单的HTML / CSS
li {
margin: 5px;
}
input {
width: 20px;
background-color: blue;
position: relative;
left: 200px;
vertical-align: middle;
}
.vertical-list {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
li{
list-style:none;
}
.horizontal-list{
display: inline;
}
<center>
<ul>
<li>
<input type="checkbox" >
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox" >
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" >label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox" >
<label class="vertical-list" > label4 label4 label4</label>
<input type="checkbox" >
<label class="horizontal-list" >label2</label>
</li>
</ul>
</center>
CSS-表
li {
margin: 5px;
display: table-row;
}
li * {
display: table-cell;
padding: 0.5em;
}
input {
background-color: blue;
position: relative;
}
.vertical-list {}
li {
list-style: none;
}
.horizontal-list {
display: inline;
}
<ul>
<li>
<input type="checkbox">
<label class="vertical-list"> label1 label1 label1</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2</label>
</li>
<li>
<input type="checkbox">
<label class="vertical-list">label2label2label2</label>
<input type="checkbox">
<label class="horizontal-list" for="myid2">label2label2</label>
</li>
<li>
<input type="checkbox">
<label class="vertical-list"> label4 label4 label4</label>
<input type="checkbox">
<label class="horizontal-list">label2</label>
</li>
</ul>