CSS: How to make the padding-right between li even?

Tags: html,css

Problem :

I have the following simple HTML.

<div>
   <ul>
     <li>A</li>
     <li>B</li>
     <li>C</li>
   </ul>
</div>

And CSS:

ul { width: 100%; display: flex; flex-direction: row };

I want to make all the <li> have the same padding-right so that the sum of widths and padding-lefts of all <li> is equal to <ul>, like the following:

Total ul length: 100px;
(1st li's width + 1st li's padding-left) +
(2nd li's width + 2nd li's padding-left) +
(3rd li's width + 3rd li's padding-left) == 100px;

so that the 3 <li>'s padding-left are equal.

Can I do this with pure CSS without javascript?

Thank you.

---

Solution :

Have you tried this:

CSS

ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
ul li {
    -webkit-flex: 1 auto;
    flex: 1 auto;
}

DEMO HERE