CSS horizontal nested list

Question

I am trying to create a horizontal list from the markup of a nested list, 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 like 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>

Here you can see the demo http://jsbin.com/exivi5 .

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

This should be compatible in FF, Webkit, and IE7 +, but consistent with 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;}

,

Answer 2

display:block;

, , Div. , , , . ( )

( , - /)

<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

( 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);
    }
});

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

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

: , .