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

---

如何更改它？

只需删除

display:inline

，从而使显示恢复到默认的-

块

#navcontainer ul li {
    display: inline;
}

删除

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

---

@谢谢，这是一个做的把戏

ulli{float:left；clear:left；margin-bottom:10px；background:#ccc}

和+1适用于您的post@Anto

float:left

并立即清除

left

是无用的，您可以使

li

浮动并删除

float

@Thirumalaimurugan感谢您的观点，但如果我删除

清除：left

，则会显示菜单horisondal@anto移除浮动：左also@Thirumalaimurugan如果我删除

float:left

列表将位于中心，这不是我想要的：）你不必添加

display:block

，这是默认设置-只需删除

inline

@JoshC你的正确答案我已经修改过了，然后再发表评论谢谢你的建议

#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;
}