CODEWITHSUNDEEP
htmlcss
user3748315
user3748315

Reputation: 149

Making a nested list appear inline

I have the following list:

<ul id="inline">
<li><a href="#">One</a>
   <ul>
   <li><a href="#">Inline1</a></li>
   <li><a href="#">Inline2</a></li>
   </ul>
</li>
<li><a href="#">Two</a>
   <ul>
   <li><a href="#">Inline1</a></li>
   <li><a href="#">Inline2</a></li>
   </ul>
</li>
</ul>

What i want to show is the first level li as new lines and the nested list to appear at the same height as its parent but inline. Like this:

One Inline1 Inline2
Two Inline1 Inline2

This is what i have right now:

#inline {
  width: 100%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#inline + ul > ul {
  display:inline;
}

But I have to basic understanding of css to figure out what is going wrong.

Upvotes: 1

Views: 1321

Answers (3)

sandeep S K
sandeep S K

Reputation: 36

Use this CSS to make it work

#inline {
  width: 100%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#inline ul {
  display:inline-block;
  list-style:none;
  margin-left:-30px;
}

#inline ul li {
  display:inline-block;
  list-style:none;
  text-decoration:none;
  margin-left:0px;
}

Upvotes: 0

KiV
KiV

Reputation: 2263

I have a simple work around for this. Lets see the fiddle.

OLD: http://jsfiddle.net/kiranvarthi/sfho4xn8/ Updated Fiddle: http://jsfiddle.net/kiranvarthi/sfho4xn8/2/

#inline {
  width: 100%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#inline ul li {
  display:inline;
}

Upvotes: 0

web-tiki
web-tiki

Reputation: 103750

You need to set the ul (child of #inline) and the children li's of these uls to display:inline;. The CSS would be :

DEMO

#inline ul, #inline ul li {
    display:inline;
    padding:0;
}

Upvotes: 2

Related Questions