水平直列列表列出

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

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

來源

2012-02-13 Zac

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

來源

2012-02-13 21:48:38 AlexC

我在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; }

來源

2012-02-13 21:55:39

嗯是的，我已經試過..在代碼干擾中必須有其他東西。 – Zac 2012-02-13 21:59:39

與您的代碼的問題是「2」後的空白。我只是刪除它，把<ul>放在「2」旁邊，它在Chrome中運行得很好。看看http://jsfiddle.net/7yufQ/2/

來源

2012-02-13 22:06:45 elclanrs

水平直列列表列出

回答

相關問題