Question

我有一个包含子元素的列表：

<ul>
    <li>.. </li>
    <li>
        <ul>
            <li>.. </li>
        </ul>
    </li>
    <li></li>
</ul>

<style> li {float: left; margin-left: 10px }  li ul {float: left} </style>

这在Firefox中很好，所有列表元素都按照我想要的方式水平内联。

LI LI LI LI LI

当我查看Chrome时，虽然这些子元素被删除在主列表元素下面，如下所示：

LI     LI                LI
           LI     LI

我在所有元素上尝试display: inline，但没有任何区别。

创建具有嵌套子项的列表元素的水平行的最佳跨浏览器方式是什么？

这是一个小提琴：http://jsfiddle.net/thirtydot/7yufQ/1/

在Firefox中，数字从浮动数据中搞定，Chrome会在上面的示例中显示它们。

Answer 1

<style> 
    ul{
      padding:0px;
      margin:0px;
      list-style-type:none;
      }
    li {float: left; margin-left: 10px }  
    li ul {float: left;} 
</style>

这是一个例子，在Chrome中也可以正常使用

http://jsfiddle.net/corotchi/8BLck/

Answer 2

您可以将ul和li内联。

http://jsfiddle.net/QFjgH/

ul, li {
 display: inline;   
}

li { margin-left: 10px; }

Answer 3

代码的问题是“2”后面的空格。我刚删除它，将<ul>放在“2”旁边，它在Chrome中运行得很好。看http://jsfiddle.net/7yufQ/2/

具有嵌套子列表的水平内联列表

3 个答案: