Html 尝试使用CSS以行模式显示彼此相邻的元素

我正在尝试创建一个电影应用程序，我被一些元素的样式所困扰。我不熟悉CSS和样式。这是我的密码。我试图一个接一个地显示这些元素。 这是我的密码

 <ul class="actions">
    <li><div class="vote_average">85</div></li>
    <li><div class="favorites-heart"><i class="far fa-heart"></i></div></li>
    <li><div class="list"><i class="fas fa-list"></i></div></li>
 </ul>

---

基本上，我试图让每个元素彼此相邻地显示为一个行模式。我希望有一个背景来对比图标图示符。

Flex box和rescue

ul{
列表样式：无；
保证金：0；
填充：0；/*去掉默认值*/
}
.行动{
显示：flex；/*使用flex*/
弯曲方向：行；
对齐项目：居中；
边框：1px纯红；/*仅用于查看*/
}
李{
边框：1px纯蓝色；/*仅用于查看*/
填充：10px；
}

一个
两个
三

这是一个代码，它与您在图中给出的示例更为对应

*{
框大小：边框框；
}
保险商实验室{
位置：相对位置；
填充：0；
保证金：0；
显示器：flex；
宽度：最大含量；
列表样式：无；
高度：50px；
}
李{
显示器：flex；
颜色：#ffffff；
证明内容：中心；
对齐项目：居中；
利润率：10px；
最小宽度：50px；
高度：50px；
边界半径：100%；
背景#C4AF3D；
}
.平均投票{
背景#081C22；
字体大小：粗体；
}

85

如果没有复杂的布局，我建议使用

内联块

s和

垂直对齐：中间

，而不是绝对定位。感谢这段代码的帮助。我实现了您的解决方案，这比我试图实现的要容易得多。当解决方案对您有帮助时，请不要忘记添加一个点，并通过单击✔ 象征很高兴我能帮忙，谢谢。你的解决方案简化了我的问题。我能够实现你的代码，使它为我的项目工作

.vote_average, .favorites-heart, .list {
    font-weight: 300;

    font-size: 18px;
    /* font-weight: 700; */
    line-height: 50px;
    position: absolute;
    width: 50px;
    text-align: center;
}


.favorites-heart::after, 
.list::after, 
.vote_average::after {
    border-radius: 100%;
    border: 2px solid #C4AF3D;
    /* #ee927b */
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.actions {
    list-style-type: none;
    padding-left: 0px;
    display: flex;
    align-items: center;
}

.actions li {
    /* display: inline-flex; */
    flex-direction: column;
    padding-right: 40px;
    
}