html - 为什么在CSS中，display:inline不能用于“li a {”，而只能用于“li {”？

我正在学习如何在我的第一个网站构建中创建菜单，并且遇到了水平与垂直教程。看来大部分归结为将列表定义为CSS中的“阻止”或“内联”。这对我来说很有意义，但是为什么呢？

li a {
  display:inline;
}

不会创建水平菜单。但是做

li {
  display:inline;
}

将创建该水平菜单。我猜想它与“ li a”和“ li”元素有关。作为参考，我将所有列表项都作为链接元素。码：

HTML-

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

和CSS垂直-

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

最佳答案

li元素默认为display: list-item。 a元素默认为display: inline。因此，在不更改其父级的情况下更改a的显示无济于事。这就像在期待别人注意到您只更换了汗衫时就已经换了衬衫。因此，对于内联列表，您需要使li内联。设置a s块是可选的，这仅意味着您可以随意处理内联元素无法更改的填充和/或边距以及其他属性。

https://jsfiddle.net/ybkkgpoe/

关于html - 为什么在CSS中，display:inline不能用于“li a {”，而只能用于“li {”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42048212/