我试图理解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.
. . .. ...