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块是可选的，它只是意味着您可以使用填充和/或边距以及您无法使用内联元素更改的其他属性。

https://jsfiddle.net/ybkkgpoe/

为什么不显示：内联工作为“li a {”，只有“li {”在CSS？

1 个答案: