html - 不能在同一行添加元素

Question

我试图在 div 的右侧创建一个 favorite 复选框，这是 html 结构:

.star {
  visibility: hidden;
  font-size: 30px;
  cursor: pointer;
  color: orange;
}

.star:before {
  content: "\2605";
  position: absolute;
  visibility: visible;
}

.star:checked:before {
  content: "\2606";
  position: absolute;
}

.group {
  background-color: #20262e;
}

<div class="group text-truncate">
  <label class="font-weight-bold"> 
        <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
        <span class="align-middle" style="color: orange;">(3 items)</span>
       </label>
  <input type="checkbox" style="float:right;" class="group-checkbox star">
</div>

如果您查看 JSFIDDLE ，您会看到复选框比容器大，我该如何管理？

Answer 1

有几件事我会改变:

1. 使用 flex 而不是 float
2. 为您的星星使用标签而不是输入本身
3. 删除绝对定位 - 它不是必需的，只会使事情复杂化
4. 不要将内联样式与 css 混合使用 - 最好使用所有 css(虽然我还没有解决这个问题)

/* seperate the checkbox and star styles */
.group-checkbox { 
  display:none;
}
.group-checkbox:checked + .star:before {  /* using the adjacent sibling selector to selec the star after a checked input */
  content: "\2606";
}

.star {
  font-size: 30px;
  cursor: pointer;
  color: orange;
}

.star:before {
  content: "\2605";
}


.group {
  background-color: #20262e;
  line-height:30px; /* may want to match the size of the star font */
  display:flex;    /* make the container flex */
  width:100%;
}

.group .font-weight-bold {
   flex-grow:1;         /* make this label grow to fill the space the star doesn't take */
}

<div class="group text-truncate">
  <label class="font-weight-bold"> 
      <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
      <span class="align-middle" style="color: orange;">(3 items)</span>
  </label>
  <input type="checkbox" class="group-checkbox" id="checkbox"><!-- give this an id -->
  <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>