无法在同一行中添加元素

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>

Answer 4

在您的.star:before和.star:after中，您需要将position设置为relative

现在，让它们与具有star类本身的输入位于同一位置！

现在您可以将输入对齐在正确的位置。

在这种情况下，您可以将它们添加到.star样式中：

.star {
  position: relative;
  bottom: 12px;
  right: 15px;
}

这就是您要寻找的

这是代码段：

.star {
  visibility: hidden;
  font-size: 30px;
  cursor: pointer;
  color: orange;
  position: relative;
  bottom: 12px;
  right: 12px;
}

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

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

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

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

我认为您可以添加top属性，并通过如下所示的定位和填充对其进行清理。

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

.star:before {
  content: "\2605";
  position: absolute;
  visibility: visible;
  top: 0;
  right: 10px;
}

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

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

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

.star和.star:before类的一些较小更新将解决此问题，请查看下面的代码片段

.star {
  visibility: hidden;
  font-size: 30px;
  cursor: pointer;
  color: orange;
  position: relative;
  margin: 0;
  padding: 0;
}

.star:before {
  content: "\2605";
  position: absolute;
  visibility: visible;
  top: 0;
  right: 0;
  line-height: 1;
  font-size: 20px;
}

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

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

<div class="group text-truncate">
  <input type="checkbox" style="float:right;" class="group-checkbox star">
  <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>
</div>