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


    CSS Howto..

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to remove css files?

    CSS/Javascript: How to draw minimal border around an inline element?

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to target Microsoft Edge with CSS? [duplicate]

    make the div (in css) to grow bottom-up? how?

    Show a caption with a semi-transparent color overlay when hovering over an image

    How to right and left align every alternate list item in html and css along with the bullets

    CSS: How to set the width and height dependent on the screen/window size?

    Show an image from b&w to color as if it were loading (left to right)

    How to get the kendo NumericalTextBox to share the width of a table cell the same way the kendo DropDownList does?

    How to fix incorrect element size on browser scaling?

    How to design this html Box for legacy browsers

    how to give two different states in css?

    How do I make a class/div behave like it were floating?

    How do you get the width of an element without a defined width?

    How to debug less css variables

    Selected text showing oversized selection area

    How to create slideshow in css without having to make more than one class?

    show div border when link is clicked

    How can I change a table td width using CSS in Spiceworks?

    How to create an highlight animation when a control gets focused [closed]

    CSS How to center a div horizontally

    Show different text based on OS

    How to add-class and focus the children on keydown function

    How to set a box on bottom of a box?

    How can I get a block to print complicated divs horizontally?

    How to make image control button for each image inside the div using css and js?

    How to achieve “responsiveness” of this template?

    How to have div fill width and height of browser window and not have the image be streched