Question

这让我疯了！通过限制未排序列表的高度，我可以在无序列表中获得一组列表项到水平堆栈（通过浮动）。

但是，如果我将一个未排序的列表放在其中一个列表项（在原始列表中）之内，那么它们就会停止水平堆叠...我已经尝试了所有内容......发生了什么事这里？为什么不起作用？

他们应该是这样的：

████

不喜欢这样：

█
█
█
█

以下是一个例子：

<style>
.container {
    width:auto;
    height:34px;
    float:left;
}
.container ul {
    list-style:none;
    padding:0;
    margin:0;
    float:left;
    height:34px;
}
.container li {
    width:34px;
    height:34px;
    float:left;
}
.container ul li ul {
    list-style:none;
    float:left;
    height:34px;
}
.container ul li ul li {
    width:34px;
    height:34px;
    float:left;
}
</style>

<div class="container">
    <ul>
        <li>
            <ul>
                <li>test</li>
                <li>test2</li>
                <li>test3</li>
                <li>test3</li>
            </ul>
        </li>
    </ul>
</div>

这可能是一种愚蠢的东西我忽略了我确定......

一个工作示例：http://jsfiddle.net/csdigitaldesign/cugF5/

Answer 1

尝试list-style：none;

.container li {
width:34px;
height:34px;
float:left;
list-style:none;
}

Answer 2

你必须观察宽度，物品都是左边浮动的，但内部的宽度是＆lt; ul＆gt;不足以将它们水平地连在一起。

尝试添加此内容：

width:400px;

到

.container ul

然后你会看到物品水平堆叠。

-Ken

Answer 3

这正是由于CSS的级联性质。浮动列表元素的容器不够宽。为什么呢？

如果没有嵌套列表，您的元素就会漂浮。这是因为包含项目的ul和包含项目的div具有全宽（因为它们是块元素）。

但是，当你有嵌套列表时，你的浮动列表元素现在包含在div（很好），两个ul s（很好），但外面的李。请注意，外部li的宽度也设置为34px，宽度不足以水平包含浮动元素。

要解决此问题，您必须确保外部li元素不会获得宽度的34px。一种可能的解决方案是仅将34px宽度放在内部li：

中

<style>
.container {
    width:auto;
    height:34px;
}
.container ul {
    list-style:none;
    padding:0;
    margin:0;
    height:34px;
    float: left;
}
.container li {
    height:34px;
    float:left;
}
.container ul li ul li {
    width:34px;
}
</style>

<div class="container">
    <ul>
        <li>
            <ul>
                <li>test</li>
                <li>test2</li>
                <li>test3</li>
                <li>test3</li>
            </ul>
        </li>
    </ul>
</div>

请注意，除非您尝试浮动容器，否则您不需要div上的float: left。

jsfiddle演示： http://jsfiddle.net/AvwRw/2/

Answer 4

重新开始并且不做任何浮动，使你的<li>第二级失效 http://jsfiddle.net/cugF5/1/

.container {
    width:auto;
    height:34px;
    background:red;
}
.container ul {
    list-style:none;
    padding:0;
    margin:0;
    background:green;

    height:34px;
}
.container li li {
    width:34px;
    height:34px;
    background:purple;
    float:left;
    list-style:none;
}
.container ul li ul {
    list-style:none;

    height:34px;
}
.container ul li ul li {
    width:34px;
    height:34px;
    background:purple;

    list-style:none;
}

就像这样，如果您想要构建一个包含2个或更多级别的菜单，该示例可能对您没有多大帮助：）

Answer 5

我找到了解决方案..是的，您可以将强制宽度添加到列表项内的无序列表中，该列表项将起作用，但是它的宽度是固定的。

真正的问题是我没有围绕这个事实包围无序列表在父列表项的容器内......并且该列表项设置为34px。将第一个父列表项设置为自动修复问题...（请记住，列表项将与其内容一样宽。）

当Compid提到相同的事情时，我正在打字这个...但他/她在我做之前就指出了......所以我会给他们信用。

Answer 6

专门为该列表设置列表格式。容器是一个单独的东西。这是很好的编码实践。浮动李而不是ul。您没有嵌套列表的格式。你可以为它创建一个单独的样式，例如“ul2”，看看对你有什么好处。

.ul1{                    
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:34px;
}
.ul1 li {
    width:34px;
    height:34px;
    float:left;
}
</style>

<ul class = "ul1">
<li>
<ul class ="ul2">
<li>test</li>
<li>test2</li>
<li>test3</li>
<li>test3</li>
</ul>
</li>
</ul>

如何获取<ul>里面的列表项，它位于另一个<ul>的<li>内，水平堆叠？</ul> </li> </ul>

6 个答案: