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

Question

我正在尝试创建一个电影应用程序，但我在设计某些元素时遇到了困难。我对 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>

.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;
    
}

here is what it currently looks like

Here is an example of what i want it to look like

基本上，我试图让每个元素彼此相邻显示为行模式。我想要一个与图标字形形成对比的背景。

Answer 1

这是一个与您在图像中给我们的示例更对应的代码。

* {
  box-sizing: border-box;
  }

ul {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  width: max-content;
  list-style: none;
  heigth: 50px;
}

li {
  display: flex;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  margin: 10px;
  min-width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #C4AF3D;
}

.vote_average {
  background: #081C22;
  font-weight: bold;
}

<ul class="actions">
    <li class="vote_average"><div >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>

如果您对此代码有任何疑问，请不要犹豫!