一、形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下:

span {width:60px; text-align:center; display:block; }

实际验证结果:IE6 OK, FIREFOX 3 OK。

一、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度的方法如下:

span {width:60px; text-align:center;  display:block; float:left;}

实际验证结果:IE6 OK, FIREFOX 3 OK。

二、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度的方法如下:

span {width:60px; text-align:center;  display:inline-block;}

实际验证结果:IE6 OK, FIREFOX 3 OK。

提示: 完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。

block,inline,inline-block的区别:

display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;

display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;

display:inline-block;——“全”可定制属性的元素特性;

补充:

1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?

答:如果对span使用float属性,总是导致span换到下一行。可以采用下面方法实现同行且居右对齐。

li { position:relative;}

li span{ position:absolute;right:0px;}

即可实现。

CSS中如何把Span标签设置为固定宽度的更多相关文章

  1. CSS 中如何把 Span 标签设置为固定宽度

    一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...

  2. css中的border-collapse属性如何设置表格边框线?(代码示例)

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  3. span标签设置margin-top没有效果

    <span>是行内元素,span只有margin-left和margin-right才有效果.要想margin-top生效就要把span转给块级元素才行.在span的css中加入以下属性即 ...

  4. display:block; 块级元素。<a>,<span>标签设置宽度和高度

    display:block;是让对象成为块级元素(比如a,span等) 转化后 可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http: ...

  5. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  6. css中关于table的相关设置

    一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...

  7. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  8. CSS中cursor属性给标签加上小手形状

    HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...

  9. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

随机推荐

  1. CSS3秘笈复习:第十一章

    1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...

  2. 2、hibernate七步走完成增删改查

    一.hibernate框架介绍如下 1.框架=模板 2.Hibernate是对象模型与关系数据库模型之间的桥梁 3.hibernate持久化概念 什么是ORM ORM是对象关系映射,是一种数据持久化操 ...

  3. jQuery 学习小结

    1,jQuery是一个简单的JavaScript库,提供了一系列辅助函数:以下简称jq; 使用jq时,通常将jq代码放到head部分的事件处理方法中,也可以将其单独写出 .js 文件,引入:但无论哪种 ...

  4. ftp资源调用迅雷下载

    <script src='http://pstatic.xunlei.com/js/webThunderDetect.js'></script> <script src= ...

  5. ECOS-Ecstore mongodb大数据 读写效率优化

    转自同功BBS 拆表存取kv <?php /* 经过拆变优化的ECStore mongodb 类 base/lib/kvstore/mongodb.php*/ class base_kvstor ...

  6. php字符操作

    //一:定义字符串的方法 //1.双引号 //2.单引号 //3.heredoc语法结构 //heredoc语法定义字符串 $str=<<<TAG 我的武功终成武林盟主TAG;//注 ...

  7. 通过httplib2 探索的学习的最佳方式

    在工作中需要对一个视频点播两百次,使其成为热门视频,才能对其p2p情况进行测试.虽然可以手动点播两百次,但是利用python发送200次post请求,能减少很多的工作量.该发送请求的方法用到了http ...

  8. web跨域问题

    环境: win7_x64旗舰版.Google Chrome-v44.0.2403.155.node-v0.10.29.express-v3.2.5.jQuery-v1.8.3 一.跨域GET: 客户端 ...

  9. WebDriver获取table的内容(通过动态获取Table单元格的TagName对其innerHTML值进行获取)

    import java.util.ArrayList;import java.util.Iterator;import java.util.LinkedHashMap;import java.util ...

  10. CRC的校验原理

    一.基本原理 CRC检验原理实际上就是在一个p位二进制数据序列之后附加一个r位二进制检验码(序列),从而构成一个总长为n=p+r位的二进制序列:附加在数据序列之后的这个检验码与数据序列的内容之间存在着 ...