我在 div 间距方面遇到了一些问题。 这是 html:
<div class="row">
<div class="col-lg-4">
<div class="checkbox checkbox-circle checkbox-business">
<input id="checkbox-business-id" class="styled" type="checkbox">
<label for="checkbox-business-id">BUSINESS</label>
</div>
<div class="checkbox checkbox-circle checkbox-health">
<input id="checkbox-health-id" class="styled" type="checkbox">
<label for="checkbox-health-id">HEALTH</label>
</div>
<div class="checkbox checkbox-circle checkbox-science">
<input id="checkbox-science-id" class="styled" type="checkbox">
<label for="checkbox-science-id">SCIENCE</label>
</div>
<div class="checkbox checkbox-circle checkbox-technology">
<input id="checkbox-technology-id" class="styled" type="checkbox">
<label for="checkbox-technology-id">TECHNOLOGY</label>
</div>
</div>
</div>
和 CSS:
.checkbox-business {
margin-top: 10px;
}
.checkbox-health {
margin-top: 10px;
}
.checkbox-science {
margin-top: 10px;
}
.checkbox-technology {
margin-top: 10px;
}
我想在 div 之间留出一些空间,并且我希望所有复选框都对齐。我无法做到这一点。另外,我正在使用 Bootstrap 。
有人可以看一下吗?
最佳答案
添加以下样式。这应该做你想做的
header.masthead {
text-align: left;
}
.checkbox {
margin-bottom: 20px;
height: 30px;
}
.checkbox label::before {
width: 30px;
height: 30px;
}
.checkbox label::after {
padding-top: 3px;
padding-left: 5px;
}
.checkbox input {
width: 20px;
height: 16px;
}
.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="radio"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c";
font-size: 18px;
padding: 1px 5px;
}
.checkbox label {
padding-left: 20px;
line-height: 30px;
}
检查更新代码 here
关于html - 垂直 div 和对齐之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50515546/