HTML / CSS - 使虚线在不同的项目上填充相同

Question

我想做一个简单的菜单推车，换食物，就像这样：

鱼............ 10个
土豆......... 10
汤............ 20

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

但是在simps，html中，这并不适用 - 宽度不同，我无法让它们完美对齐，这就是它的外观：

如何在不编辑字体大小，字母间距等的情况下使其完全相同？

感谢。

Answer 1

您可以使用flexbox来对齐事物：

＆＃13;

＆＃13;

li {
  display: flex;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一个简单的解决方法是使用monospaced font。我会寻求一个更动态的解决方案，如@ovokuro提出的解决方案，并避免计算字符，但无论如何这里是这种方法的演示：

.monospaced {font-family: 'Inconsolata', monospace;}

<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<ul>
  <li>Fish............10</li>
  <li>Potatoe.........10</li>
  <li>soup............20</li>
</ul>

<ul class="monospaced">
  <li>Fish............10</li>
  <li>Potatoe.........10</li>
  <li>soup............20</li>
</ul>

Answer 3

您可以使用table正确对齐项目：

＆＃13;

＆＃13;

<table>
  <tr>
    <td>Fish..........</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Potato........</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Soup..........</td>
    <td>20</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;