我们经常在设计网站的导航部分的时候,如果想让导航超链接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属性)none或block

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

  9. CSS 基础 例子 display属性:block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

随机推荐

  1. cas+shiro统一注销原理解析

    1,客户端发送一个注销请求到cas server,跟踪casorg.jasig.cas.CentralAuthenticationServiceImpl类的destroyTicketGrantingT ...

  2. 【原创】.NET读写Excel工具Spire.Xls使用(2)Excel文件的控制

                  本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...

  3. PHP学习笔记:用php读取xml文件

    xml已经被json逐渐替代,现在用的api都是用貌似用的json,但是有些老的网站还是在用xml. 这里默认xml文件为:address.xml,存放在和读取的php文件相同级别目录,xml内容如下 ...

  4. &lt;转&gt;如何进行code review

    转自: http://pm.readthedocs.org/zh_CN/latest/codereview/howto.html 如何进行code review? code reivew是保障代码质量 ...

  5. Android 学习

    入门: Android疯狂讲义 http://hukai.me/android-training-course-in-chinese/index.html http://segmentfault.co ...

  6. javascript读取本地文件

    由于浏览器考虑到安全问题,在修改本地文件方面除了IE几乎都不支持. IE例子 //读文件 function readFile(filename){ var fso = new ActiveXObjec ...

  7. STRUTS2获得session和request

    在struts1中,获得到系统的request或者session对象非常方便,都是按照形参传递的,但是在struts2中,request和session都被隐藏了struts提供两种方式访问sessi ...

  8. 计蒜客模拟赛D2T3 蒜头君救人:用bfs转移状压dp

    题目链接:https://nanti.jisuanke.com/t/16444 题意: 蒜头君是一个乐于助人的好孩子,这天他所在的乡村发生了洪水,有多名村民被困于孤岛上,于是蒜头君决定去背他们离开困境 ...

  9. CSP201312-4 有趣的数【dp】

    问题描述 试题编号: 201312-4 试题名称: 有趣的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 我们把一个数称为有趣的,当且仅当: 1. 它的数字只包含0, 1, ...

  10. 8.5 GOF设计模式四: 观察者模式Observer

    GOF设计模式四: 观察者模式Observer  现实中遇到的问题  当有许多不同的客户都对同一数据源感兴趣,对相同的数据有不同的处理方式,该如 何解决?5.1 定义: 观察者模式  观察者模式 ...