CODEWITHSUNDEEP
htmlcss
SHAMAN
SHAMAN

Reputation: 83

Break line an inline list

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

Upvotes: 6

Views: 22728

Answers (3)

Mark Hamill
Mark Hamill

Reputation: 11

Apparently splitting the list is undesired, so for a responsive list, just add a div around the lot and give it a suitable width:

html:

<div>
  <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>
</div>

CSS:

ul {list-style:none;}
li {display:inline-block;}
div {float:left; width:60%;}

Fiddle here

Upvotes: -1

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

You can this by using css like, here i have added div with cleat both to html to make children contained in ul.

ul li{list-style:none; float:left;}
ul li:nth-child(5){clear:both;}
ul li h1 a{text-decoration:none;}
<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>
    <div style="clear:both;">
</ul>

Upvotes: 0

pavel
pavel

Reputation: 27082

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/

Upvotes: 10

Related Questions