我正在尝试设置一组水平和垂直的复选框,但它们并没有统一显示。 每个复选框的标签大小可能不同,例如复选框的一个标签上写着“International Casauty Treaty”,而另一个只写着 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>
关于html - 如何水平和垂直显示多个复选框 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55421368/