Question

我希望能够像jsFiddle一样向右边的复选框证明元素列表。这是如何做到这一点的最佳做法吗？传统上，我从来没有浮动相互嵌套的物品，所以我想确定这是否是正确的方法。

代码（https://jsfiddle.net/nmLx1ewu/2/）：

＆＃13;

>>> df1.groupby('Mode').mean().reset_index()
  Mode  Time
0  Air   3.5
1  Sea   5.0
>>>

＆＃13;

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

＆＃13;

Answer 1

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

代码（https://jsfiddle.net/nmLx1ewu/4/）：

＆＃13;

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

＆＃13;

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

＆＃13;

对齐网格元素的对齐/对齐

1 个答案: