我有一个 纵向 导航菜单 <UL> 每每 <LI> 只要是最宽的元素。
https:/i.stack.imgur.com1satJ.png。
我如何使用CSS来调整每个 <LI> 只在必要的情况下才会宽，同时又要保持 纵向 方向？
我试过了 .main-navigation li {display: inline-block;}和 .main-navigation li {float: left;}但他们都把我的菜单变成了水平的，我不想这样。
我的 <UL> 叫做.main-navigation ul 如果有帮助的话，请先谢谢你的帮助！我有一个垂直的导航菜单。
最好将样式应用于LI内部的元素，而不是LI本身。
.main-navigation ul{
list-style: none
}
.main-navigation li{
display: block;
padding: 10px 0;
text-align: center
}
.main-navigation a{
text-decoration: none;
display:inline
}
.main-navigation a:hover{
border-bottom: 1px solid #f00
}<html>
<head>
</head>
<body>
<div class="main-navigation">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Long Link</a></li>
<li><a href="#">Even longer Navigation Link</a></li>
</ul>
</div>
</body>
</html>