html - 对齐列表中同一行下方的文本

Question

我正在尝试在同一行上对齐元素。 (见截图)。我想在列表上的同一点开放时间。我从数据库中获取数据并使用 vue 来显示该数据。
这就是我显示开放时间和日期的方式。那么我如何才能使这些时间与列表的相同点，所以没有像下图这样的抛出？

<ul class="display-items"
    v-for="item in opendays_hours">
     
    <li class="display-item" v-if="item">
         {{item.day}} {{item.times}}
    </li>
</ul>

Answer 1

您可以通过为 li 添加 css 样式来实现此目的，尝试在您的样式文件中为 li 添加此 css 样式

li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

我也创建了一个例子，让我与你分享