我们经常在设计网站的导航部分的时候,如果想让导航超链接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. 基础选择器,长度与颜色,标签display,嵌套关系,盒模型,盒模型布局

    css基础选择器 # *(统配选择器): 控制html, body,以及body下所有用于显示的标签 # div(标签选择器): 该标签名对应的所有该标签 # .(class选择器)(eg: .div ...

  7. 细说CSS中的display属性

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

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

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

  9. 显示和隐藏(display属性)none或block

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

随机推荐

  1. myeclipse导入项目出现jquery错误(有红叉)

    今天导入了一个项目,但是进去之后jquery出现了红叉,如图(事实上在我没调好之前两个jquery文件都有叉号) 怎么调呢?右键jquery文件,选择MyEclipse->Exclude Fro ...

  2. Android TextView中 字体加粗方法

    textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗 textView.getPaint().setFakeBoldT ...

  3. SpringMVC过程中@RequestBody接收Json的问题 总是报415

    在SpringMVC中用@RequestBody接收Json的问题,总是报415,经过一翻查找 前台js的post: var postdata = '{"title":" ...

  4. CSSposition属性

    基本html文本 1.  position-static #part1{ width:  200px; height:  200px; background:  gold; } #part2{ pos ...

  5. luogu P2680 运输计划

    传送门 要最长链的长度最短,一秒想到二分,因为如果对于某个长度满足改掉一边的边权后能使得所有链长度不超过该长度,则所有比他长的长度也满足. 二分最终答案.我们要使得原来长度大于二分的\(mid\)的链 ...

  6. Java连接SqlServer2008数据库

    Java连接SqlServer2008数据库 首先下载JDBC:下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id=21599 下 ...

  7. Python中文件的读写操作的几种方法

    对文件的操作,步骤为:打开一个文件-->读取/写入内容-->保存文件 文件读写的3中模式 # 1.w 写模式,它是不能读的,如果用w模式打开一个已经存在的文件,会清空以前的文件内容,重新写 ...

  8. 面试:----Nginx的一理解

    1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML.图片)通过HTTP协议展现给客户端. 配置: 2.反向代理服务器 什么是反向代理? 客户端本来可以直 ...

  9. 如何在Mac OS系统下搭建Java开发环境 配置Java环境变量

    1. 打开终端   在finder里面搜索(这台MAC)查找终端   2. 在cdlouiedeAir:~ cdlouie$(cdlouie是我的电脑用户名) 后面输入sudo vim /etc/pr ...

  10. tcp发送缓冲区中的数据都是由产生数据的进程给推送到ip层还是有定时任务触发?

    和几个变量有非常大的关系 发送缓冲区的大小,如何单独设置一个socket的发送缓冲区 socketopt 发送缓冲区中的数据,如果被拥塞窗口限制住了,那么这些数据可能就放在tcpbuffer里的,此时 ...