Html 如何获取内部列表项<；ul>；在a<；李>；另一个<；ul>；水平堆叠？

这让我快发疯了！通过限制未排序列表的高度，我可以将一组列表项水平堆叠（通过浮动）到未排序列表的内部

但是，如果我将一个未排序的列表放在其中一个列表项中（即原始列表中），那么它们将停止水平堆叠。。。我什么都试过了。。这是怎么回事？为什么不起作用

它们应该是这样的：

█ █ █ █

不是这样的：

█
█
█
█

以下是一个例子：

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

.集装箱{
宽度：自动；
高度：34px；
浮动：左；
}
.集装箱ul{
列表样式：无；
填充：0；
保证金：0；
浮动：左；
高度：34px；
}
李先生{
宽度：34px；
高度：34px；
浮动：左；
}
.集装箱保险公司{
列表样式：无；
浮动：左；
高度：34px；
}
.集装箱ul li ul li{
宽度：34px；
高度：34px；
浮动：左；
}



试验
测试2
测试3
测试3

可能是我忽略了一些愚蠢的事情我确信

工作示例：

尝试列表样式：无

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

---

为该列表专门设置列表格式。容器是一个独立的东西。这是很好的编码实践。浮动李而不是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>

.ul1{
列表样式类型：无；
保证金：0；
填充：0；
高度：34px；
}
.ul1 li{
宽度：34px；
高度：34px；
浮动：左；
}



试验
测试2
测试3
测试3

您必须注意宽度，所有项目都向左浮动，但内部

的宽度不足以将它们水平放置在一行中
尝试添加以下内容：

width:400px;

到
然后您将看到项目水平堆叠

---

-Ken
这正是由于CSS的级联特性。浮动列表元素的容器不够宽。为什么?
如果没有嵌套列表，元素可以很好地浮动。这是因为包含项目的

ul

和包含项目的

div

具有全宽（因为它们是块元素）
但是，当您拥有嵌套列表时，浮动列表元素现在包含在

div

（这很好）、两个

ul

s（这很好）以及外部li中。注意，外部

li

的宽度也被设置为

34px

，其宽度不足以水平容纳浮动元素
要解决此问题，您必须确保外部li元素没有获得宽度的

34px

。一种可能的解决方案是将宽度为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>

.集装箱{
宽度：自动；
高度：34px；
}
.集装箱ul{
列表样式：无；
填充：0；
保证金：0；
高度：34px；
浮动：左；
}
李先生{
高度：34px；
浮动：左；
}
.集装箱ul li ul li{
宽度：34px；
}



试验
测试2
测试3
测试3

请注意，除非您也尝试浮动容器，否则不应该在div上使用

float:left

JSFIDLE演示：

---

重新启动并使任何内容都不浮动，豁免您的
第二级。


---

就像这样，如果您想构建一个包含2个或更多级别的菜单，那么这个示例可能对您没有多大帮助：）
我找到了解决方案。。是的，您可以将强制宽度添加到列表项内的无序列表中，该列表项将正常工作，但其宽度是固定的
真正的问题是，我没有意识到无序列表在父列表项的容器中。。。该列表项被设置为34px。正在将第一个父列表项设置为自动修复问题。。。（请记住，列表项将与其内容一样宽）

---

我正在打字的时候，康普也提到了同样的事情…但他/她在我之前指出了这一点。。因此，我会给他们评分。
你能发布不起作用的场景吗？示例中的这个场景。。。试试看。我甚至在sub
和
• s中添加了单独的样式（尽管不需要，因为它是级联的）。对不起，误读了问号，这一点都没有帮助。此外，它已经被设置在
  哦，对不起，完全超卖了：试试一个集装箱{然后设置不需要的css属性，因为它已经级联到子项中了…但是我在示例中添加了它，尽管它是多余的。没有办法自动设置宽度吗？当它只是一组
  和
  • s时它会工作。当元素中有另一组时为什么不工作？是的，我需要避免指定
    的一个类…它用于joomla模板菜单。PHP动态生成代码并为我插入一个样式较少的
    。因此我以其他方式将其作为目标。

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

    .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;
    }