我正在设计CSS复选框样式。事情看起来很不错，但我有一个问题。如果框标签是大量文本，则框最终不一致对齐。
我如何更改下面的代码，使复选框位于文本的左侧，以便一致？
这是一个JSFiddle：https://jsfiddle.net/7295tvp0/
span.bigcheck-target {
font-family: FontAwesome;
font-size: 1.2em;
margin-top: 20px!important;
}
input[type='checkbox'].bigcheck {
position: relative;
left: -999em;
font-size: 2em;
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096";
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046";
}
span.bigcheck {
display: block;
font-size: 20px;
}
.bigcheck-target {
position: relative
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">Short
<input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
</label>
</span>
<span class="bigcheck">
<label class="bigcheck">Much longer name
<input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
</label>
</span>
答案 0 :(得分：2)
我提出了这个解决方案：
span.bigcheck-target {
font-family: FontAwesome;
font-size: 1.2em;
margin-top: 20px!important;
}
input[type='checkbox'].bigcheck {
position: relative;
left: -999em;
font-size: 2em;
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096";
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046";
}
span.bigcheck {
display: block;
font-size: 20px;
}
.bigcheck-target {
position: relative
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">
<input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
<span> Short</span>
</label>
</span>
<span class="bigcheck">
<label class="bigcheck">
<input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
<span>Much longer name</span>
</label>
</span>
答案 1 :(得分：1)
使用flexbox重写代码。
您可以在不更改标记的情况下实现此目的：
span.bigcheck-target {
font-family: FontAwesome;
font-size: 1.2em;
/* space between icon and label */
margin-right: 5px;
}
input[type='checkbox'].bigcheck {
/* don't show standard checkbox */
display: none;
font-size: 2em;
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096";
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046";
}
span.bigcheck {
font-size: 20px;
/* checkbox on every line */
display: block;
}
label.bigcheck {
/* become inline flex-container */
display: inline-flex;
/* center vertically every item */
align-items: center;
/* inverse layout in row */
flex-direction: row-reverse;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">Short
<input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
</label>
</span>
<span class="bigcheck">
<label class="bigcheck">Much longer name
<input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
</label>
</span>
或者使用标记更改，在复选框图标（推荐方式）之后放置文本：
span.bigcheck-target {
font-family: FontAwesome;
font-size: 1.2em;
/* space between icon and label */
margin-right: 5px;
}
input[type='checkbox'].bigcheck {
/* don't show standard checkbox */
display: none;
font-size: 2em;
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096";
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046";
}
span.bigcheck {
font-size: 20px;
}
label.bigcheck {
/* become flex-container, putting checkbox on every line */
display: flex;
/* center vertically every item */
align-items: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">
<input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
Short
</label>
</span>
<span class="bigcheck">
<label class="bigcheck">
<input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/>
<span class="bigcheck-target"></span>
Much longer name
</label>
</span>
答案 2 :(得分：0)
尝试span.bigcheck-target{float:left;}
并删除：span.bigcheck-target:margin-top: 20px!important;
答案 3 :(得分：0)
首先，您的HTML需要一些重做。使用div元素创建行。提供input元素id值，然后使用label元素，以便他们不必使用input属性包装这些for元素。
然后，只需为标签设置统一宽度：
span.bigcheck-target {
font-family: FontAwesome;
font-size: 1.2em;
margin-top: 20px!important;
}
input[type='checkbox'].bigcheck {
font-size: 2em;
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096";
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046";
}
label {
font-size: 20px;
display:inline-block;
width:200px;
}<div>
<label for="amenities1">Short</label>
<input id="amenities1" name="amenities" value="wifi" type="checkbox" name="cheese" value="yes">
<span class="bigcheck-target"></span>
</div>
<div>
<label for="amenities2">Much longer name</label>
<input id="amenities2" name="amenities" value="personal_video" type="checkbox" name="cheese" value="yes">
<span class="bigcheck-target"></span>
</div>
答案 4 :(得分：0)
将您的内容放在“输入”和“跨度”
之后并阻止用户突出显示您的内容：
.bigcheck { user-select: none; }