将复选框对齐到左侧

Question

我已经设置了我的复选框样式，由于某种原因，我无法让文本左侧的框顶部浮动。我试过浮动内联块似乎没什么用。我能够将文本向右浮动，但它在框和文本之间留下了很大的差距

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以更改html markup，即在.tag之后添加checkbox, label并轻松解决或使用css left属性在check-box之前调整text .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; } 1}}。

HTML更改可能就是这样，

＆＃13;

＆＃13;

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

＆＃13;

CSS left

＆＃13;

＆＃13;

＆＃13;

使用.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; }属性。

＆＃13;

＆＃13;

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

＆＃13;

Flying Saucer

＆＃13;

＆＃13;

＆＃13;