수평 중첩 된 목록 CSS

Question

내가 예를 들어 내가 현재의 마크 업이 중첩 된 목록 마크 업에서 수평 목록을 만들려고 해요 사용 :

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

내가이 비슷한 무언가를 달성하기 위해 싶습니다

를

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

여기에서 데모를 볼 수 있습니다. http://jsbin.com/exivi5.

기존의 중첩 목록 마크 업을 사용하면 가능합니까? 또한 전체 뷰포트에 맞도록 ul 상위 목록의 너비를 100 %로 유지할 수 있습니까?

이것은 FF, Webkit 및 IE7 +에서 호환되어야하지만 IE8 + 지원을 위해 정정됩니다.

미리 감사드립니다.

Answer 1

시도 : 여백 & 패딩이 동일하게 보여야을 조롱의 비트와 함께

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; 

을 추가하는 경우 리튬의 블록 레벨 요소로 렌더링, 당신은 다음 그냥 사업부를 기반으로 예처럼 그들을 스타일을 할 수 있어야한다. 예제 페이지와 똑같이 서로를 옆에두기 위해 왼쪽으로 띄워야 할 수도 있습니다.

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

내 코드가 재귀가 아닙니다. 둘 이상의 중첩 수준이있는 경우 직접 수정해야합니다. 이러한 CSS 규칙을 추가