我正在设计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>我想出了这个解决方案：
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>使用 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>尝试span.bigcheck-target{float:left;}
并删除：span.bigcheck-target:margin-top: 20px!important;
首先，你的HTML需要一些返工。使用div元素创建行。为input元素id值，然后使用label元素，以便它们不必使用for属性包装这些input元素。
然后，只需为标签设置统一的宽度：
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>把你的内容放在你的"输入"和"span"之后
要阻止用户突出显示您的内容，请使用：
.bigcheck { user-select: none; }