水平直列列表列出

问题描述：

我有一个子元素就像一个列表：水平直列列表列出

<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显示他们在我上面的例子。

使用reset.css文件对所有浏览器都有相同的初始样式。 – 2012-02-13 21:47:39

为什么这些项目是嵌套的？ – 2012-02-13 21:50:32

您能否向我们展示您的网站的实时链接或[jsFiddle]（http://jsfiddle.net/）/ [JS Bin]（http://jsbin.com/）演示的问题？ – thirtydot 2012-02-13 21:50:33

答

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

我在CSS中也有重置，所以这些元素确实有0填充和边距，除非我添加。 – Zac 2012-02-13 21:50:49

检查此链接，如果它适合你http://jsfiddle.net/corotchi/8BLck/ – AlexC 2012-02-13 21:54:11

感谢您的帮助，我现在明白了。 – Zac 2012-02-13 22:04:23

答

可以使双方ul和li小号在线。

http://jsfiddle.net/QFjgH/

ul, li { 
display: inline; 
} 

li { margin-left: 10px; }

嗯是的，我已经试过..在代码干扰中必须有其他东西。 – Zac 2012-02-13 21:59:39

答

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

水平直列列表列出

相关推荐