Menu
Can I do all the blocks of the same height without JS and min-height (as a special case)? Blocks can be placed on multiple lines.
Example jsfiddle
ul {
font-size: 0;
max-width: 300px;
text-align: center;
}
li {
vertical-align: top;
display: inline-block;
width: 30%;
margin: 1%;
background: grey;
font-size: 12px;
}<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
414
Inline element properties:The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS. Inline elements flow left to right, meaning inline elements appear on the same line unless the line wraps or there's an explicit line break ( <br/> )
Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
If flexbox is an option, then you can make ul a wrapping flexbox.
How this works?
display: flex creates a flexbox which has the property to distribute whitespace between its children in various ways.
flex-wrap: wrap allows the lis to go to the next line depending on the content
justify-content: center does horizontal centering.
Vertically the lis have a property called align-items: stretch, which is the default - this allows the heights of the lis to be equal in a line.
See demo below:
ul {
font-size: 0;
max-width: 300px;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
li {
vertical-align: top;
display: inline-block;
width: 30%;
margin: 1%;
background: grey;
font-size: 12px;
}<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>Easily, using display: flex.
Specify the orientation + wrapping in flex-flow: row wrap; and the central alignment in justify-content: center;
Example:
ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
font-size: 0;
max-width: 300px;
text-align: center;
}
li {
vertical-align: top;
display: inline-block;
width: 30%;
margin: 1%;
background: grey;
font-size: 12px;
}<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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
