Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > 如何给行内元素设置宽高,背景分析与实现方法!
隐藏/显示侧边栏

如何给行内元素设置宽高,背景分析与实现方法!

2014-04-27 13:29    来源:未知    责任编辑:admin    字号【
给行内元素设置宽高,例如span、a等HTML标签。本来这些标签是没有宽高的,在某种场合:例如你想让某个行内元素与其它行内元素现在在同一行,而float又不能达到效果,此时给行内元素增加宽高就能达到很好的效果!!!

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素浮动和边距。

有些HTML元素则是自然带有display:inline;样式属性,这也是元素默认的样式,
比如   
<span>   
<a>   
<strong>   
<em>   
<img>   
<br>
等元素,其不会打断文档排布流,会在一行中一个挨一个地排列。

当想要做一个水平的列表时,一种方式是使用float来实现,但得容忍其缺点;另一种方式是使用display:inline-block;来实现。现在转入正题了。

用float方式会带来的麻烦:
使用float方式需要注意的是,要有一个元素来包裹float元素,同时避免接下来的元素紧紧地靠近它。另外一个麻烦是,当有一个多行水平列表,但是列表里的内容有不同的高度时,就会排的非常痛苦。

用display:inline-block;方式:display:inline-block;方式样式化列表时,既可使得列表元素能按行挨个排列,同时元素还能保持其块属性,比如高和宽、上下边距等。但是对有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

用display:inline-block;的浏览器兼容:CSS中使用display:inline-block;来样式化,在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。
但是在早期的IE,比如IE 7,就要做一些改变才能适应。   
/* For IE 7 */   
zoom: 1;   
*display: inline;通常,做浏览器兼容适应的CSS样式化,最好是分开独立的样式文件,然后通过条件注释将其引入。

(CSS给行内元素设置宽高的方法?)

用display:inline-block;的空白符引起的问题:
因为元素之间是行内inline修饰排列的,因此HTML中的空格符也会影响到这个修饰。也就是说,当我们把元素的大小和顺序排列好后,如果在<li>元素之间有空格符,这个空格符将会产生4px的边距。

综述,用display:inline-block;来实现水平列表比用float方式更容易控制,需要注意的是前者会由空格符带来边距影响。

更多
Tags 标签: 行内设置宽高
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |