为什么要在列表中的“a”标签上放置display：block？

Question

我想了解CSS上的图像精灵，一行代码看起来像这样。

#navlist li, #navlist a{height:44px;display:block;} 

我只是想知道什么样的影响呢显示：块对“一”，我知道这是“一”的标签，因为如果我删除“一”，反之如果该链接将无法正常工作我删除了“display：block”，我只是想知道为什么它应该是“display：block”。

Answer 1

使内联元素（a，span等）表现得像一个盒子模型元素（div，p，h1等），换句话说，使a标签的行为类似于div标签。

内联元素可以并排在同一行共处，例如，如果你写

<a href="example.com">Link1</a> <a href="example.com">Link2</a> 

就会出现像Link1Link2 但盒模型元素不能住在同一行，例如如果你喜欢写东西

<div>Box1</div><div>Box2</div> 

就会出现像

Box1 
Box2 

两个div都会占据整个空间（即使宽度较小）。在一个列表，例如，

<li><a href="">Home</a></li> 

如果列表宽度为300px则因为在默认情况下a标签inline和使用display:block将使a元素的标签将不包括李的宽度的整个宽度占据li的全部宽度，即使它不是那么宽。

还有更多要说的是，我刚刚给了你一个例子，你应该读更多。 Check this link和Check this example。

Answer 2

为display:block W3Schools的解释是休耕

The element is displayed as a block-level element (like paragraphs and headers) ，你可以检查显示器的行为here

实际上大多是我们使用display:block在四种情况下

1. 元素不包含任何内容，但需要显示为修正大小块。 例如：与背景图像链接，但在开启和关闭锚标签之间没有文字。
2. 元素需要以固定大小显示，根据内容忽略自动大小。
3. 有一组元素，每个元素应显示在每行（每行一个元素）。
4. 为了实现显示隐藏我们可以使用diaply:none和display:block

但链路功能，不具有与display或CSS，链接showld工作相互依赖任何关系，CSS写了锚标记，只是风格链接。

这里有一些关于displayhttps://developer.mozilla.org/en-US/docs/Web/CSS/display