HTML/CSS - 使虚线在不同元素上填充相同

Question

我想制作一个简单的菜单推车，用于食物，像这样制作:

鱼......................10
土 bean …………10
汤…………20

完美对齐，带点，宽度相同等。

但在 simps、html 中，这不适用 - 宽度不同，我无法让它们完美对齐，这就是它的样子:

如何在不修改字体大小、字母间距等的情况下使它们完全相同？

谢谢。

Answer 1

您可以使用 flexbox对齐事物:

li {
  display: flex;
}

li .dots {
  border-bottom: 1px dotted black;
  flex: 1;
}

<ul>
  <li>Fish<span class="dots"></span><span>10</span>
  </li>
  <li>Potato<span class="dots"></span><span>20</span>
  </li>
  <li>Soup<span class="dots"></span><span>10</span>
  </li>
</ul>