CODEWITHSUNDEEP
htmlcss
Magnus Pilegaard
Magnus Pilegaard

Reputation: 129

HTML/CSS - Make dotted line fill the same on different items

I want to make a simple menu cart, for food, made like this:

Fish............10
Potatoe.........10
soup............20

Aligned perfectly, with dots, and same width etc.

But in simps, html, this doesn't apply - the width is different, i can't get them align perfectly, this is how it looks:

description of screenshot

How do i make it all equal, without editing font size, letter spacing etc?

Thanks.

Upvotes: 2

Views: 1447

Answers (3)

Lorek Bryanson
Lorek Bryanson

Reputation: 195

You can use table to align the items properly:

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

Upvotes: 0

tgogos
tgogos

Reputation: 25250

A simple workaround to this would be to use a monospaced font. I would go for a more dynamic solution like the one proposed by @ovokuro and avoid counting characters, but anyway here is a demo of this approach:

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

Upvotes: 1

sol
sol

Reputation: 22959

You can use flexbox to align things:

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>

Upvotes: 7

Related Questions