为了账号安全,请及时绑定邮箱和手机立即绑定

关于a标签加入inline-block的问题

我想问下啊 a标签不加display的时候 貌似 看着也不错 为什么要加入display呢?让a元素有了块级属性 又有什么优点呢?我试了下  感觉加了display之后 margin-top 貌似 变的多了 更好看了...但是想不明白 为何如此!求学的好的 告诉下  让我学习下 谢谢了

正在回答

2 回答

我们经常在设计网站的导航部分的时候,如果想让导航超链接hover显示背景,但稍不注意,默认的inline会让你抓狂,因为display:inline会将超链接显示为内联元素,即没有宽和高的作用效果,这里无论你背景怎么设置,宽高都不会超出超链接的宽高范围!所以我们可以使用 block 或 inline-block 来解决此问题!

display:block   此元素将显示为块级元素,此元素前后会带有换行符。
display:inline-block 行内块元素。(CSS2.1 新增的值)

当我们在<a>标签里添加 display:block 或 display:inline-block 时,<a>标签也就有了块元素的一些特性,此时我们设置<a>标签的宽高才会起作用,hover背景也才会有效果,不同的是,display:block 会让元素前后带上换行符,所以如果想让导航元素在一行内显示,则需要添加float属性,完整的写法如下:

<a href="#" style="display: block; float:left;">block</a>

而display:inline-block 则不需要float属性,因为它的本身就是行内块元素,写法如下:

<a href="#" style="display: inline-block;">block</a>


5 回复 有任何疑惑可以回复我~
#1

慕姐4424294 提问者

超级专业的回答 万分感谢了 谢谢啊
2015-11-11 回复 有任何疑惑可以回复我~

内联元素没有宽高   你可以设置他为 内联块级元素

0 回复 有任何疑惑可以回复我~
#1

慕姐4424294 提问者

哦 是不是这样意思 块级元素没有高度 宽度 就是我给a设置了 高度 和宽度 a也不会显示不出来 所以 必须 让a成为一个块级元素 这样它的高度 宽度 才会显示 是吧?
2015-11-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于a标签加入inline-block的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信