2

这一直让我发疯！通过限制无序列表的高度，我可以让一组列表项水平（通过浮动）堆叠在无序列表内。

但是，如果我将一个无序列表放入其中一个列表项（即在原始列表中），那么它们将停止水平堆叠......我已经尝试了一切......这里发生了什么？为什么这不起作用？？？

它们应该是这样的：

█ █ █ </p>

不像这样：

█
█
█
</p>

这是一个例子：

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

4

6 回答 6

1

尝试列表样式：无；

.container li {
width:34px;
height:34px;
float:left;
list-style:none;
}
于 2013-06-16T22:44:01.303 回答
1

你要注意宽度，item都是向左浮动的，但是内部<ul>的宽度不足以让它们水平排成一排。

尝试添加这个：

width:400px;

至

.container ul

然后你会看到项目水平堆叠。

-肯

于 2013-06-16T22:56:49.807 回答
1

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

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

但是，当您拥有嵌套列表时，您的浮动列表元素现在包含在div（这很好）、两个uls（这很好）以及外部 li中。请注意，outerli的宽度也被设置为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>

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

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

于 2013-06-16T23:03:16.513 回答
1

重新启动并且什么都没有浮动，除了你的<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 个或更多级别的菜单，该示例可能对您没有太大帮助 :)

于 2013-06-16T23:04:41.093 回答
1

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

真正的问题是我没有意识到无序列表位于父列表项的容器内......并且该列表项设置为 34px。将第一个父列表项设置为自动修复问题...（请记住，列表项将与其内容一样宽）。

当 Compid 提到同样的事情时，我正在打字的过程中......但他/她在我之前指出了它......所以我会给他们功劳。

于 2013-06-16T23:12:03.047 回答
0

专门为该列表格式化您的列表。容器是一个单独的东西。这是很好的编码习惯。浮动 li 而不是 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>
于 2013-06-16T22:53:51.853 回答