HTML/CSS - 讓虛線填寫相同的不同項目

Question

我想作一個簡單的菜單車，適用於食品，這樣做：

魚............ 10
珀泰......... 10
湯............ 20

完全對齊，用點，和相同的寬度等

但在辛普森，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>

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對齊項目正確：

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