无法在同一行中添加元素

Question

我正在尝试favourite在右侧创建一个复选框div,这是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>

Answer 2

请添加position: relative;到.group并相应调整明星位置.检查如下:

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

.star:before {
  top: -3px;
  right: 2px;
  content: "\2605";
  position: absolute;
  visibility: visible;
}

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

.group {
  position: relative;
  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>

Answer 3

我的解决方案是建议您使用flexbox它很容易理解,您的问题来自font-size您在图标上分配的问题.你需要减少font-size并在父母上制作我为你制作的CSS :)

.group {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.star {
    position: relative;
    visibility: hidden;
    font-size: 20px;
    cursor: pointer;
    color: orange;
}

.star:before {
  content: "\2605";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  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>