时间戳

首页 > 解决方案 > 垂直 div 和对齐之间的空间

html - 垂直 div 和对齐之间的空间

问题描述

我对 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 之间留出一些空间，并且我希望所有复选框都对齐。我无法做到这一点。另外，我正在使用引导程序。

有人可以看看吗？

小提琴： https ://jsfiddle.net/paul28/do5efo1w/2/

标签： htmlcss

解决方案

添加以下样式。这应该做你想做的

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;
}

在此处检查更新的代码

推荐阅读