Menu
I have an inline list and I need to line break the list in two lines...
<ul>
<li><h1><a href="#">One</a></h1></li>
<li><h1><a href="#">Two</a></h1></li>
<li><h1><a href="#">Three</a></h1></li>
<li><h1><a href="#">Four</a></h1></li>
<li><h1><a href="#">Five</a></h1></li>
<li><h1><a href="#">Six</a></h1></li>
<li><h1><a href="#">Seven</a></h1></li>
</ul>
Desire result:
One Two Three Four < /br> Five Six Seven
387
Shift + Enter should add a line break.
To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break.
The <br> HTML element produces a line break in text (carriage-return).
The quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block . Doing so places all the <li> elements within a single line, with a single space between each list item.
What about float and clear?
ul {overflow: hidden;}
li {float: left;}
li:nth-child(4) {clear: left;}
http://jsfiddle.net/hfc0u7e8/
Or if you don't want to float items and use, as you wrote, display: inline, you can use this code with :before:
ul {overflow: hidden;}
li, h1 {display: inline;}
li:nth-child(4):before {display: block; content: '';}
http://jsfiddle.net/hfc0u7e8/1/
131
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
