css - 并排样式列表层次结构

Question

我正在尝试考虑设置列表的最佳方法，以使每个 ul 在页面上处于相同的物理高度级别。因此，例如，如果我有：

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>3</li>
</ul>

它会显示为：

1   2.1
2   2.2
3

我想出的唯一方法是将每个绝对定位<ul>到相对定位的容器的顶部，但我希望容器保持其子容器的大小。想了很久，还没想出好的解决办法。如果我float是他们，或者display:inline-block;，每个子集列表将继承其父级的顶部，所以它会显示如下：

1
2   2.1
3   2.2

话虽这么说……救命！

Answer 1

在此处发布整个代码。稍微编辑了您的html。

<ul class="menu">
    <li><span>1</span></li>
    <li><span>2</span>
        <ul class="sub_menu">
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li><span>3</span></li>
</ul>​

您可以编辑 css（背景颜色、颜色、宽度等以满足您的需要）

.menu li span{
    display:block;
    float:left;
    width: 20px;
    background-color:#ddd;
    padding:2px;
}
.menu li ul{
    float:left;
}

.menu ul li{
    padding:2px;
    float:left;
    margin:0px 5px;
    background-color:#eee;
}

.menu ul{
    clear:right;
    overflow:auto;    
}

.menu > li{
    clear:both;
    background-color:#ccc;
    overflow:auto;
    width:100px;
}
​

这是 JSFIDDLE 的链接 http://jsfiddle.net/zTygm/1

Answer 2

Looks incredibly tricky. Is there a reason the data cannot be separated into two lists that are not connected by child-parent relationship? maybe even using some javascript to pull out the child lists on the client side.

something similar to this in jQuery:

var childLists = $("ul > li > ul");
$(".listsContainer").append(childLists);
$("ul > li > ul").remove();

And then just use some basic css to move the new lists into position, probably best to 'append' them into their own sub container to make stacking on top of each other easier.

edit: working example http://jsfiddle.net/3HqxL/ (css does not have to be in javascript)