html - 对齐/对齐 li 网格元素

Question

我希望能够像在 jsFiddle 中那样将元素列表对齐到右侧的复选框。这是如何做到这一点的最佳实践？传统上我从来没有 float 过相互嵌套的元素，所以我想确定这是否是解决此问题的正确方法。

代码(https://jsfiddle.net/nmLx1ewu/2/):

.list-group {
  list-style:none;
  margin-right:10px;
}
li {
  width:50%;
  display:inline-block;
  float:left;
}
.items {
  float:right;
}

<ul class="list-group">
  <li>
    <div class='items'>
      <label>Toggle me</label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>Longer text </label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>short</label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>hi</label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>more unjustified</label>
      <input type="checkbox">
    </div>
  </li>
</ul>

Answer 1

您可以在不使用 float 的情况下使用更简单的解决方案。

代码(https://jsfiddle.net/nmLx1ewu/4/):

.list-group {
  list-style-type:none;
  margin-right:10px;
}

li {
  width:calc(50% - 2px);
  display:inline-block;
}
.items {
  text-align:right;
}
.items label, 
.items input {
  display:inline-block;
}

<ul class="list-group">
  <li>
    <div class='items'>
      <label>Toggle me</label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>Longer text </label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>short</label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>hi</label>
      <input type="checkbox">
    </div>
  </li>
  <li>
    <div class='items'>
      <label>more unjustified</label>
      <input type="checkbox">
    </div>
  </li>
</ul>