Horizontal Nested List using CSS

Question

I'm trying to create a horizontal list from a nested list markup, as an example I have the current markup:

<ul>
<li class="alone">List Item 1</li>
<li class="alone">List Item 2</li>
<li class="alone">List Item 3</li>
<li class="group">List Item 4
  <ul>
    <li class="not_alone">List Item 4a</li>
    <li class="not_alone">List Item 4b</li>
    <li class="not_alone">List Item 4c</li>
    <li class="not_alone">List Item 4d</li>
  </ul>
</li>
<li class="alone">List Item 5</li>
</ul>

I would like to achieve something similar to this:

<style>
div { display: inline-block; }
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699;  }
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.item { padding: 2px; margin: 0 2px; }
</style>
<div class="wrapper">
  <div class="alone item">List Item 1</div>
  <div class="alone item">List Item 2</div>
  <div class="alone item">List Item 3</div>
  <div class="group item">
    List Item 4
    <div class="group item">List Item 4a</div>
    <div class="group item">List Item 4b</div>
    <div class="group item">List Item 4c</div>
    <div class="group item">List Item 4d</div>
  </div>
  </div>
  <div class="alone item">List Item 5</div>
</div>

You can see a demo here http://jsbin.com/exivi5.

Is this possible using the existing nested list markup? Also, can I also keep the width of the ul parent list to 100% so it fits the entire viewport?

This needs to be compatible in FF, Webkit and IE7+ but will settle for IE8+ support.

Thanks in advance!

Answer 1

try adding these css rules:

ul {list-style: none; margin: 0; padding: 0; float:left; display: inline;}
ul li {float:left; display: inline; margin: 0 5px; padding: 3px 2px;}
ul li ul {float:right;}
h2 {clear: left;}

with a bit of fiddling with margins & paddings it should look the same as yours

Answer 2

If you add the style

display:block;

The li's will render as block level elements, and you should then be able to style them up just like the Div based example. You might need to float them left to get them next to each other exactly like your example page. (or use inline-block instead of block perhaps)

Try this (I haven't tested this as I'm on my little laptop - this is based on memory / guesswork)

<style>
    #horizontallist li { display: block; float:left; }
    .alone { background: #E5ECF9; border: 1px solid #336699; color: #336699;  }
    .group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
    .group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
    .item { padding: 2px; margin: 0 2px; }
</style>

<ul id="horizontallist">
    <li class="alone item">List Item 1</li>
    <li class="alone item">List Item 2</li>
    <li class="alone item">List Item 3</li>
    <li class="group item">List Item 4
      <ul>
        <li class="group item">List Item 4a</li>
        <li class="group item">List Item 4b</li>
        <li class="group item">List Item 4c</li>
        <li class="group item">List Item 4d</li>
      </ul>
    </li>
    <li class="alone">List Item 5</li>
</ul>

Answer 3

Try this (requires jQuery):

var wrapper = $("body").append("<div id='wrapper'></div>").find("#wrapper");

var lis = $("ul > li");

lis.each(function() {
    var li = $(this);
    if (li.hasClass("alone")) wrapper.append("<div class = 'alone item' >" + li.text() + " </div>");
    else if (li.hasClass("group")) {
        var html = "<div class='group item'>";
        li.find("li").each(function() {
            html += "<div class = 'group item' >" + $(this).text() + " </div>";
        });
        html += "</div>";
        wrapper.append(html);
    }
});

Demo: http://fiddle.jshell.net/EJZMS/show/light/

Code: http://fiddle.jshell.net/EJZMS/

My code is not recursive: If you have more than one level of nesting, you will need to modify it yourself.