CSS水平菜單：display：inline;將無效

我在Chrome/Firefox。我也在這裏閱讀過幾篇教程和問題。CSS水平菜單：display：inline;將無效

我有一個UL包含李。我將LI設置爲「display：inline;」，但他們不會。他們仍然是垂直的。

我在做什麼錯？

Thx。

這裏是我的CSS：

.menu{ 
    width: 100%; 
    padding: 0px; 
    margin: 0px; 
    outline: 1px solid grey; 
    background-color: #f6f6f6; 
    font-size:100%; 
} 

.menu ul{ 
    float: left; 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    background-color: #f6f6f6; 
} 

.menu li ul{ 
    display: none; 
    height: auto; 
    padding: 0px; 
    margin: 0; 
    background-color: #f6f6f6; 
    outline: 1px solid gray; 
    position: absolute; 
    z-index: 200; 
    left: 20px; 
    top: 30%; 
} 

.menu li:hover ul{ 
    display: block; 
} 

.menu li:hover{ 
    background-color: #005ea2; 
} 

.menu li{ 
    display: inline; 
    padding: 0; 
    margin: 0; 
    border-bottom: 1px dotted grey; 
} 

.menu ul li:last-child{ 
    border: none; 
} 


.menu a{ 
    display: block; 
    color: #333333; 
    text-decoration: none; 
    margin: 0px; 
    margin-left: 5px; 
} 

.menu a:hover{ 
    color: white; 
    background-color: #005ea2; 
} 

.menu .menu_header{ 

    color: #333333; 
} 

.menu .menu_header a:hover{ 
    color: white; 
}

來源

2010-12-17 MrBubbles

是否有任何特殊原因，您將.menu ul設置爲float ：剩下？嘗試刪除它。並且給我們html代碼。 – 2010-12-17 09:35:41

嘗試使用'display：inline-block;'而不是'display：inline;'（'float：left;'也可以，但有其他副作用） – Spudley 2010-12-17 10:28:46

@Spudley - inline-block得不到很好的支持x-瀏覽器。 – annakata 2010-12-17 10:31:17

的<li>元素需要有float:left

來源

2010-12-17 09:34:28 Andreyu

也許吧。它取決於html。這也是更好的方法。我不知道他爲什麼把它們放在* inline * – 2010-12-17 09:43:48

首先你可能會考慮增加相關的HTML到你的答案，以幫助應答者理解你的處境更好。

我可以發現幾個奇怪的事情，可能與您的問題有關。

首先，li ul選擇器不是非常有用：它更可能是你的意思相反，ul li。

其次，我發現懸停時你有東西變成display: block。這是一個非常奇怪的行爲，在懸停時，你確定嗎？

三，我看到你有a { display: block }。如果它的容器是display: inline，那麼它不會很好地發揮作用，因此您可能想要爲容器切換到display: inline-block（這正是我對水平菜單的建議）

來源

2010-12-17 09:39:56 Agos

我認爲* li ul *是子菜單，所以它是* display：none *。無論如何，這將是很好的HTML代碼。 – 2010-12-17 09:42:39

謝謝！ a {display：block;}是問題所在。伊萬是對的，里拉是子菜單。 – MrBubbles 2010-12-17 09:43:52

內聯元素不允許包含塊級元素...... float（通常是）可能是更好的解決方案。 – annakata 2010-12-17 09:49:23

CSS水平菜單：display：inline;將無效

回答

相關問題