侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css – 为什么要在列表中的“a”标记上放置一个display:block?

2022-12-23 星期五 / 0 评论 / 0 点赞 / 28 阅读 / 1591 字

我试图理解CSS上的图像精灵,一行代码看起来像这样. #navlist li,#navlist a{height:44px;display:block;} 我只是想知道显示什么效果:块有“

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

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

我只是想知道显示什么效果:块有“a”,我知道它是“a”标签,因为如果我删除“a”链接将无法工作,反之如果我删除了“display:block”,我只是想知道为什么它应该是“display:block”.

.

解决方法

. 要使内联元素(a,span等)的行为类似于框模型元素(div,p,h1等),换句话说,使标记的行为类似于div标记.

内联元素可以并排放在同一行上,例如,如果您编写

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

它们看起来像Link1 Link2
但是盒子模型元素不能存在于同一行中,如果你写了类似的东西

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

他们会像

Box1Box2

两个div都将占据它们周围的整个空间(即使它们的宽度较小).例如,在列表中

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

如果列表宽度为300px,那么a标签将不会覆盖li宽度的整个宽度,因为默认情况下a标签是内联的并且使用display:block将使a元素占据li的整个宽度,即使它是不那么广泛.

关于这个还有更多的话要说,我刚给你举了一个例子,你应该阅读更多. Check this link和Check this example.

. . .. ...

广告 广告

评论区