为什么在CSS中，display：inline只对“ li a {”有效，而对“ li {”无效？

Question

我正在学习如何在我的第一个网站构建中创建菜单，并且遇到了水平与垂直教程。 似乎大部分归结为将列表定义为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;
}

Answer 1

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

https://jsfiddle.net/ybkkgpoe/