首页 > 代码库 > 转:超链接a标签display属性的block和inline-block的用法说明
转:超链接a标签display属性的block和inline-block的用法说明
我们经常在设计网站的导航部分的时候,如果想让导航超链接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="http://www.mamicode.com/#" style="display: block; float:left;">block</a>
而display:inline-block 则不需要float属性,因为它的本身就是行内块元素,写法如下:
<a href="http://www.mamicode.com/#" style="display: inline-block;">block</a>
转:超链接a标签display属性的block和inline-block的用法说明
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。