html - 使用css垂直列出菜单

Question

以下是我创建的菜单列表的小提琴，它显示了菜单horizontal，但我想显示它们vertical

小提琴包含以下代码：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;
}

我该如何改变呢？

Answer 1

演示

删除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;
}

Answer 2

只需删除display:inline，从而使显示恢复到其默认值 - block。

#navcontainer ul li {
    display: inline;
}

在这里更新了 jsFiddle