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

看起来非常棘手。是否有理由将数据分成两个未通过子父关系连接的列表？甚至可能使用一些javascript来提取客户端的子列表。

jQuery中与此类似的东西：

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

然后只需使用一些基本的CSS将新列表移动到位，最好将它们“附加”到自己的子容器中，以便更容易堆叠。

编辑：工作示例http://jsfiddle.net/3HqxL/（css不一定是javascript）

Answer 2

在此处发布完整代码。稍微编辑了你的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 AS WELL的链接 http://jsfiddle.net/zTygm/1

样式列表层次结构并排

2 个答案: