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によって提案されたような、よりダイナミックな解決のために行くと、文字を数えないよう、とにかく、ここで、このアプローチのデモであるでしょう：あなたがアイテムを揃えるためにtableを使用することができます

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