Menu
I'm wondering if it is possible to do this in CSS, without javascript:
A list of N <li> items, with display inline, equal width, and the width of the all equal to the width of the container
I can have 3 <li> items, in this case the <li> width will be 33%, or I can have 4 <li> items, then the li width will be 25%.
733
This value prevents the contents of the list item element to take up the entire width. An easy way to fix this and create a full width li link is to convert the a element to a flexbox container. This is done by adding display flex to the nav_item selector.
You'd have to work on your code because you can't assign widths to inline elements. But this can be solved by setting the display to block and by floating it.
Define the available stretch-able space by using padding on the parent element. Use box-sizing: border-box on the parent element to subtract the padding and border defined when child element sets height 100%. This will cause child elements to use the actual free space of the parent when using height: 100%
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
This is a perfect example for usage of display: table.
Works in modern browsers and IE8+...
Support chart
JSFiddle
css:
ul {
display: table;
width: 100%;
table-layout: fixed; /* optional, for equal spacing */
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle; /* or similar, if needed */
}
html:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
