为什么你把显示：块放在“a”标签是否在列表中？ [英] Why do you put a display:block on an "a" tag that is inside a list?

问题描述

  #navlist li，我想要了解CSS上的图片精灵，一行代码看起来像这样。 #navlist a {height：44px; display：block;} 
  

：block has ona，我知道它是为a标签，因为链接将不工作，如果我删除a，反之，如果我删除显示：块，我只是想知道为什么应该是display：block。

解决方案

使内联元素（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 =>首页< / a> ; / li> 
  

如果列表宽度 300px 标签不会覆盖li的宽度，因为默认情况下 a 标签 inline 并使用 display：block 将使 a 元素占据 li ，即使它不是那么宽。

有更多的说，我刚刚给你一个例子，你应该阅读更多。 查看此链接以及查看此示例。

I am trying to understand image sprites on CSS, and one line of code looks like this.

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

I am just wondering what effect does display:block has on "a", I know that it is for the "a" tag since the link won't work if I removed "a" and conversely if I removed "display:block", I'm just wondering why it should be "display:block".

解决方案

To make the inline element (a, span etc) to behave like a box model element (div, p, h1 etc), in other words, to make the a tag behave like a div tag.

Inline elements can live side by side on the same line, for example if you write

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

they will appear like Link1 Link2 but box model elements can't live in the same line, for example, if you write something like

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

they will appear like

Box1
Box2

Both divs will occupy the whole space around them (even if they are smaller in width). In a list, for example,

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

If the list width is 300px then the a tag will not cover the full width of the li's width because by default the a tag is inline and using display:block will make the a element to occupy the full width of the li, even if it's not that wide.

There are more to say about this, I've just gave you an example, you should read more. Check this link and also Check this example.

这篇关于为什么你把显示：块放在“a”标签是否在列表中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！