Html 无法在同一行中添加元素

我正在尝试在

div

的右侧设置一个

favorite

复选框，这是html结构：

.star{
可见性：隐藏；
字体大小：30px；
光标：指针；
颜色：橙色；
}
明星：以前{
内容：“\2605”；
位置：绝对位置；
能见度：可见；
}
.星：检查：之前{
内容：“\2606”；
位置：绝对位置；
}
.组{
背景色：#20262e；
}

这是一篇很长的文章
（3项）

请添加

位置：相对至
。分组
，并相应调整星形位置。检查以下内容：


.star{
可见性：隐藏；
字体大小：20px；
光标：指针；
颜色：橙色；
}
明星：以前{
顶部：-3px；
右：2px；
内容：“\2605”；
位置：绝对位置；
能见度：可见；
}
.星：检查：之前{
内容：“\2606”；
位置：绝对位置；
}
.组{
位置：相对位置；
背景色：#20262e；
}

这是一篇很长的文章
（3项）
我的解决方案建议您使用
flexbox
这很容易理解，您的问题来自您在图标上指定的
字体大小。您需要减小
字体大小
，并在父级上制作我为您制作的CSS:）


.group{
显示器：flex；
柔性流：行换行；
对齐项目：居中；
证明内容：之间的空间；
}
.明星{
位置：相对位置；
可见性：隐藏；
字体大小：20px；
光标：指针；
颜色：橙色；
}
明星：以前{
内容：“\2605”；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
能见度：可见；
}
.星：检查：之前{
内容：“\2606”；
位置：绝对位置；
}
.组{
背景色：#20262e；
}

这是一篇很长的文章
（3项）
在您的
中。星形：在
之前和
之后。星形：在
之后，您需要将
位置设置为
相对

现在让它们与具有
star
类本身的输入处于相同的位置

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

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

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

这就是你要找的

以下是代码片段：


.star{
可见性：隐藏；
字体大小：30px；
光标：指针；
颜色：橙色；
位置：相对位置；
底部：12px；
右：12px；
}
明星：以前{
内容：“\2605”；
位置：相对位置；
能见度：可见；
}
.星：检查：之前{
内容：“\2606”；
位置：相对位置；
}
.组{
背景色：#20262e；
高度：25px；
}

这是一篇很长的文章
（3项）
我想改变以下几点：

使用flex代替float
使用星号标签，而不是输入本身
删除绝对定位-它不是必需的，只会使事情复杂化
不要将内联样式与css混合使用-最好使用所有css（不过我还没有解决这个问题）

/*将复选框和星形样式分开*/
.group复选框{
显示：无；
}
.group复选框：选中+.star:在{/*之前使用相邻同级选择器在选中输入后选择星号*/
内容：“\2606”；
}
.明星{
字体大小：30px；
光标：指针；
颜色：橙色；
}
明星：以前{
内容：“\2605”；
}
.组{
背景色：#20262e；
行高：30px；/*可能需要匹配星形字体的大小*/
显示：flex；/*使容器灵活*/
宽度：100%；
}
.group.font-weight粗体{
flex grow:1；/*使此标签增长，以填充星星没有占据的空间*/
}

这是一篇很长的文章
（3项）
我认为您只需添加一个top属性，然后使用如下所示的定位和填充来清理它


.star{
可见性：隐藏；
字体大小：30px；
光标：指针；
颜色：橙色；
}
明星：以前{
内容：“\2605”；
位置：绝对位置；
能见度：可见；
排名：0；
右：10px；
}
.星：检查：之前{
内容：“\2606”；
位置：绝对位置；
}
.组{
背景色：#20262e；
填充物：5px；
}

这是一篇很长的文章
（3项）
对
.star
和
.star进行了一些小的更新：在
类解决此问题之前，请查看下面的工作片段


.star{
可见性：隐藏；
字体大小：30px；
光标：指针；
颜色：橙色；
位置：相对位置；
保证金：0；
填充：0；
}
明星：以前{
内容：“\2605”；
位置：绝对位置；
能见度：可见；
排名：0；
右：0；
线高：1；
字体大小：20px；
}
.星：检查：之前{
内容：“\2606”；
位置：绝对位置；
}
.组{
背景色：#20262e；
}

这是一篇很长的文章
（3项）
您是否忘记了家长上的
位置：相对
您指的是在小组中？这也是迄今为止唯一一个星星在点击后不会改变大小的答案。