在列表下方的同一行上对齐文本答案

【问题标题】：Align text on the same line below in list在列表下方的同一行上对齐文本
【发布时间】：2021-07-31 09:34:26
【问题描述】：

我正在尝试将项目对齐在同一行。（见截图）。我想在名单上的同一点开放时间。我从数据库中获取数据并使用 vue 显示该数据。

这是我显示营业时间和日期的方式。那么我怎样才能使这些时间与列表的相同点，所以没有像下图这样的抛出？

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

【问题讨论】：

是否强制使用ul/li标签？使用标签应该会更好

标签： html css list vue.js

【解决方案1】：

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

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

我也做了一个例子，分享给大家

【讨论】：

谢谢！工作 100%。
不客气！