html - CSS 复选框样式

Question

我正在研究 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>

Answer 1

我想到了这个解决方案:

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>