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

列出第1项
列出第2项
列出第3项
列出第4项

列出第4a项
列出第4b项
列出第4c项
列出第4d项


列出第5项

我想实现类似的目标：

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

div{display:inline块；}
.单独{背景：#E5ECF9；边框：1px实心#336699；颜色：#336699；}
.group{背景：#FBE3E4；边框：1px实心#CC0000；颜色：#CC0000；}
.group.not#u独自{背景：#FBE3E4；边框：1px实心#CC0000；颜色：#CC0000；}
.item{padding:2px；margin:0 2px；}
清单项目1
清单项目2
清单项目3
清单项目4
清单项目4a
清单项目4b
清单项目4c
清单项目4d
清单项目5

你可以在这里看到一个演示

这是否可以使用现有的嵌套列表标记？此外，我还可以将ul父列表的宽度保持为100%，以便它适合整个视口吗

这需要在FF、Webkit和IE7+中兼容，但需要IE8+支持

提前谢谢

如果添加样式

display:block;

li将渲染为块级元素，然后您应该能够像基于Div的示例一样设置它们的样式。您可能需要将它们向左浮动，使它们彼此相邻，就像您的示例页面一样。（或者使用内联块而不是块）

试试这个（我还没有测试过，因为我在我的小笔记本电脑上-这是基于内存/猜测）

#水平列表li{显示：块；浮动：左；}
.单独{背景：#E5ECF9；边框：1px实心#336699；颜色：#336699；}
.group{背景：#FBE3E4；边框：1px实心#CC0000；颜色：#CC0000；}
.group.not#u独自{背景：#FBE3E4；边框：1px实心#CC0000；颜色：#CC0000；}
.item{padding:2px；margin:0 2px；}

列出项目1
列出项目2
列出项目3
列出项目4

列出项目4a
列出项目4b
列出项目4c
列出项目4d


列出第5项

试试这个（需要jQuery）：

var wrapper=$（“body”）.append（“”）。find（“#wrapper”）；
var lis=$（“ul>li”）；
lis.each（函数（）{
var li=$（本）；
if（li.hasClass（“单独”））wrapper.append（“+li.text（）+”）；
else if（li.hasClass（“集团”））{
var html=“”；
li.find（“li”）。每个（函数（）{
html++=“”+$（this）.text（）+“”；
});
html+=“”；
append（html）；
}
});

演示：

代码：

---

我的代码不是递归的：如果有多个嵌套级别，则需要自己修改。

尝试添加以下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;}

---

只要稍微修改一下边距和填充物，它看起来应该和你的一样

你的问题到底是什么？在基于div的标记中，您是否已经准备好应用于列表元素了？使用ul li元素而不是div和相同的类，您不会得到相同的结果？？不，您不会得到完全相同的结果。您应该更喜欢静态css规则而不是JS，因为你不能确定你所有的用户是否都启用了它。这取决于OP。我只是想给他们尽可能多的选项。幸运的是，我只是在寻找一个基于CSS的解决方案，非常酷的方法！谢谢。IE fon非本机内联元素中不完全支持内联块模式：请参阅@Lucius-谢谢，我已经编辑了我的示例，改为使用block和float。我还在ul上了一门课，使这些相当戏剧化的风格更加具体。（这本来是一个ID，但我在我的mac电脑上，令人尴尬的是我不知道如何键入哈希/磅符号）。@Lucius-现在我已经学会了如何在我的英国mac电脑上获得#符号，我已经再次编辑了它（如果有人想知道的话，可以使用alt+3）。看起来除了“列表项4”文本之外，其他文本都很好“清单项目4*“。你可以看到我在这里所说的-关于如何使其与其他li元素保持一致，有什么想法吗？”？还有什么方法可以使父ul的行为像一个div并具有100%宽度？有什么方法可以使ul的行为像一个div并强制100%宽度？您可以通过指定一个宽度来保持父ul的100%宽度：100%，但请记住，如果修改其边距或填充，则需要考虑这些边距或填充，以使浮动元素自动调整其大小以适应其内容，从而使其不再充当公共块元素。要恢复此行为，您需要手动指定指定的宽度。不幸的是，如果您的元素设置了侧边距或填充，那么将宽度设置为100%将不起作用，但您必须从总宽度中减去它们

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

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