我们经常在设计网站的导航部分的时候，如果想让导航超链接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>

转：超链接a标签display属性的block和inline-block的用法说明的更多相关文章

  1. 超链接a标签的属性target的可选值有哪些以及区别

    超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...

  2. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  3. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  4. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  5. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  6. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  7. 块级元素、行内元素、display属性

    块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...

  8. Display属性学习总结

    HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...

  9. 显示和隐藏（display属性）none或block

    显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...

随机推荐

  1. 《Play for Java》学习笔记（五）Form

    本书第六章以一个实例介绍了Play Framework中Form的使用,如何绑定数据,如何进行验证 一.项目结构和action

  2. FZU 2093 找兔子 状压DP

    题目链接:找兔子 n的范围是[1, 15],可以用0 到 (1<<n)-1 的数表示全部状态,用dp[i] = t表示到达状态i的最少时间是t,对于每个点,如果它能到达的所有点在t秒时都已 ...

  3. qml json 解析到 ListView

    https://github.com/kromain/qml-utils/tree/master/JSONListModel 非常棒!! 实现的原理如下文: http://goessner.net/a ...

  4. android 启动时的短暂黑屏解决

    http://blog.csdn.net/lonely_fireworks/article/details/22291835 http://www.cnblogs.com/henanjing/arch ...

  5. Oracle 过程控制语句整理

    分支语句/循环语句 v_case ) :; begin then dbms_output.put_line('条件成立'); elsif then then dbms_output.put_line( ...

  6. zabbix3.0部署(LAMP)

    0.1 初始化 #!/bin/sh yum clean all systemctl stop firewalld.service systemctl disable firewalld.service ...

  7. mac下安装apache+php+mysql

    运行“sudo apachectl start”,再输入帐号密码,这样Apache就运行了. 运行“sudo apachectl -v”,你会看到Mac OS X 10.6.3中的Apache版本号: ...

  8. GITHUB的初次使用

          对于一个从未用过  接触过github的人来说,达到一个最终的成功真可谓是历经千辛万苦.在这里真的感谢我们的小组组长,我遇到的问题除了自己的查到的,剩 下的基本上都是组长帮我解决的.当所有 ...

  9. 使用eclipse创建在myeclipse中运行的web工程

    今天在跟随慕课网学习java时,遇到课程中老师使用Myeclipse,我用的是eclipse,那么就使用eclipse创建在Myeclipse项目 参考: 如何在Eclipse配置Tomcat服务器 ...

  10. 支持多人协作的在线免费作图工具：ProcessOn

    之前朋友给我推荐一款作图工具ProcessOn,出于好奇我就研究了一下它,今天我就给大家简单介绍一下这款免费的在线作图工具:ProcessOn 首先使用ProcessOn我们需要有一个帐号,这样每次操 ...