css - 将复选框左对齐

Question

我已经设置了复选框的样式，但出于某种原因，我无法让复选框顶部 float 在文本的左侧。我已经尝试过 floats inlines blocks 似乎没有任何效果。我能够将文本向右浮动，但它在方框和文本之间留下了很大的空隙

.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	background-color: #f0f0ee;
	border: 1px solid #dcdcda;
	box-shadow: none;
	padding: 9px;
	border-radius: 0px;
	display: inline-block;
	position: relative;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
	box-shadow: none;	
}

.regular-checkbox:checked + label {
	background-color: #f0f0ee;
	border: 1px solid #dcdcda;
	box-shadow: none;
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 15px;
	position: absolute;
	top: -4px;
	left: 3px;
	color: #99a1a7;
}


.tag {
	position: relative;
	top: 0px;
	display: block;
	float: left;
	font-size: 13px;
	color: #000;
}

    <div class="large-12 columns">
		<div>
			<div class="tag">Box 1</div>
			<input type="checkbox" id="checkbox-1-1" class="regular-checkbox"><label for="checkbox-1-1"></label>
		</div>
		<div>
			<div class="tag">Box 2</div>
			<input type="checkbox" id="checkbox-2-1" class="regular-checkbox"><label for="checkbox-2-1"></label>
		</div>
	  </div>

Answer 1

要么您可以更改您的 html 标记，即在 checkbox, label 之后添加 .tag 并轻松解决该问题，或者使用 css left 属性在 text 之前对齐 check-box。

HTML 的变化可能是这样的，

.regular-checkbox {
  display: none;
}

.regular-checkbox + label {
  background-color: #f0f0ee;
  border: 1px solid #dcdcda;
  box-shadow: none;
  padding: 9px;
  border-radius: 0px;
  display: inline-block;
  position: relative;
}

.regular-checkbox + label:active,
.regular-checkbox:checked + label:active {
  box-shadow: none;
}

.regular-checkbox:checked + label {
  background-color: #f0f0ee;
  border: 1px solid #dcdcda;
  box-shadow: none;
  color: #99a1a7;
}

.regular-checkbox:checked + label:after {
  content: '\2714';
  font-size: 15px;
  position: absolute;
  top: -4px;
  left: 3px;
  color: #99a1a7;
}

.tag {
  position: relative;
  top: 0px;
  display: inline-block;
  font-size: 13px;
  color: #000;
  vertical-align: top;
}

<div class="large-12 columns">
  <div>
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox">
    <label for="checkbox-1-1"></label>
       <div class="tag">Box 1</div>
  </div>
  <div>
    <input type="checkbox" id="checkbox-2-1" class="regular-checkbox">
    <label for="checkbox-2-1"></label>
    <div class="tag">Box 2</div>
  </div>
</div>

这使用 CSS left 属性。

.regular-checkbox {
  display: none;
}

.regular-checkbox + label {
  background-color: #f0f0ee;
  border: 1px solid #dcdcda;
  box-shadow: none;
  padding: 9px;
  border-radius: 0px;
  display: inline-block;
  position: relative;
  left: -30px;
}

.regular-checkbox + label:active,
.regular-checkbox:checked + label:active {
  box-shadow: none;
}

.regular-checkbox:checked + label {
  background-color: #f0f0ee;
  border: 1px solid #dcdcda;
  box-shadow: none;
  color: #99a1a7;
}

.regular-checkbox:checked + label:after {
  content: '\2714';
  font-size: 15px;
  position: absolute;
  top: -4px;
  left: 3px;
  color: #99a1a7;
}

.tag {
  position: relative;
  top: 0px;
  display: block;
  float: left;
  font-size: 13px;
  color: #000;
  left: 25px;
}

<div class="large-12 columns">
  <div>
    <div class="tag">Box 1</div>
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox">
    <label for="checkbox-1-1"></label>
  </div>
  <div>
    <div class="tag">Box 2</div>
    <input type="checkbox" id="checkbox-2-1" class="regular-checkbox">
    <label for="checkbox-2-1"></label>
  </div>
</div>