菜單列表中垂直使用CSS

以下是我創建menu listing小提琴，這表明菜單horizontal但我想，以顯示他們vertical菜單列表中垂直使用CSS

小提琴包含此代碼：HTML

<div id="navcontainer"> 
<ul> 
<li><a href="#">Milk</a></li> 
<li><a href="#">Eggs</a></li> 
<li><a href="#">Cheese</a></li> 
<li><a href="#">Vegetables</a></li> 
<li><a href="#">Fruit</a></li> 
</ul> 
</div>

和CSS

#navcontainer ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
text-align: center; 
} 

#navcontainer ul li { display: inline; } 

#navcontainer ul li a 
{ 
text-decoration: none; 
padding: .2em 1em; 
color: #fff; 
background-color: #036; 
} 

#navcontainer ul li a:hover 
{ 
color: #fff; 
background-color: #369; 
}

我該如何改變這種情況？

來源

2013-10-09 Java Questions

只需刪除display:inline，因此會導致顯示恢復爲其默認設置 - block。

#navcontainer ul li { 
    display: inline; 
}

Updated jsFiddle here

來源

2013-10-09 05:56:27

@JosC感謝，這是一個做了技巧'ul li {float：left;清楚：離開; margin-bottom：10px;背景：#ccc}'和+1爲你的帖子 –

@Anto如果你想讓它們全部對齊，請參閱http://jsfiddle.net/7f46u/ –

@Anto'float：left'並立即生成'clear：left'沒用，你讓你的'''浮動和刪除你的'浮動' –

Demo

刪除display:inline和填充在li和標籤text-align將解決你的問題看起來變化

#navcontainer ul li {padding:10px;} 

#navcontainer ul li a 
{ 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #036; 
    width:75px; 
    display:block; 
    text-align:center; 
}

來源

2013-10-09 06:00:53

您不必添加默認的「display：block」，只需刪除「inline」即可。 –

@JoshC你的正確我修改了之前你評論任何方式感謝您的意見 –

菜單列表中垂直使用CSS

回答

相關問題