水平嵌套列表使用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

回答

相关问题