为什么将 display:block 放在列表内的“a”标签上？

Question

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

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

我只是想知道 display:block 对 "a" 有什么影响，我知道它是针对 "a" 标签的，因为如果我删除了 "a" 链接将不起作用，相反如果我删除了 "display:block" ，我只是想知道为什么它应该是“显示：块”。

Answer 1

使内联元素（a、span 等）表现得像一个盒子模型元素（div、p、h1 等），换句话说，让a标签表现得像一个div标签。

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

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

它们将显示为Link1 Link2 但框模型元素不能位于同一行中，例如，如果您编写类似

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

他们会看起来像

Box1
Box2

两个 div 都将占据它们周围的整个空间（即使它们的宽度更小）。例如，在列表中，

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

如果列表宽度是，300px那么 a 标签将不会覆盖 li 宽度的整个宽度，因为默认情况下，a标签 isinline和 usingdisplay:block将使a元素占据 的整个宽度li，即使它不是那么宽。

关于这个还有很多要说的，我只是给你举了个例子，你应该多读读。检查此链接并检查此示例。