CSS

Question

我有一个垂直导航菜单<UL>，每个<LI>和最宽的元素一样长。

https://i.stack.imgur.com/1satJ.png

如何使用 CSS 将每个 <LI> 的大小调整为仅需要的宽度，同时保持垂直方向？

我试过.main-navigation li {display: inline-block;}和.main-navigation li {float: left;}，但他们都把我的菜单水平了，我不想这样。

我的 <UL> 叫 .main-navigation ul 如果有帮助的话。在此先感谢您的帮助！

Answer 1

最好将样式应用于 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>

CSS - 如何在我的垂直导航菜单 <UL> 中获得可变宽度 <LI>

CSS - How to get variable width <LI> in my Vertical Nav Menu <UL>

html

menu

menuitem