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

尝试添加这些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;}

略微摆弄利润率＆amp;填充它应该看起来与你的相同

Answer 2

如果添加样式

display:block;

li将呈现为块级元素，然后您应该能够像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/

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

使用CSS的水平嵌套列表

3 个答案: