水平嵌套列表使用CSS

我試圖創建一個嵌套列表標記水平列表，作爲一個例子，我有當前的標記：水平嵌套列表使用CSS

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

在此先感謝！

來源

2010-12-04 schone

你的問題是什麼呢？您是否已經擁有了基於div的標記中所需的內容，並準備應用於列表元素？ – 2010-12-04 17:12:15

使用ul-li元素而不是divs和相同的類，你不會得到相同的結果？ – Sotiris 2010-12-04 17:12:52

不，你沒有得到完全相同的結果。 – schone 2010-12-05 01:20:10

嘗試添加這些CSS規則：

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

帶着幾分與利潤擺弄&墊襯它看起來應當是一樣的和你

來源

2010-12-04 17:22:42 Lucius

如果添加的樣式

display:block;

李的將呈現爲塊級元素，然後你應該能夠他們的風格了，就像基於股利例子。您可能需要將它們左移，使其與您的示例頁面完全一樣。（或使用inline-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>

來源

2010-12-04 17:17:31

inline-block模式在IE中並不完全支持非本地行內元素：請參閱http://www.quirksmode.org/css/display.html – Lucius 2010-12-04 17:28:34

試試這個（需要的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/

我的代碼不是遞歸的：如果你有多層嵌套，你將需要自己修改它。

來源

2010-12-04 17:22:25

水平嵌套列表使用CSS

回答

相關問題