一、形如<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. ubuntu下pip install mysql-python 失败的解决方案

    ubuntu连接mysql 需要安装mysql-python 出现can not find mysql-config 文件错误 先安装 sudo apt-get install libmysqld-d ...

  2. offsetWidth,offsetHeight到底该如何理解?

    1.对象的可见宽度(对象指body.div等) 2.offsetWidth可以返回div的宽 3.offsetWidth=width+padding+border(不包括margin外边距) 4.返回 ...

  3. poj 1411 Calling Extraterrestrial Intelligence Again

    题意:给你数m,a,b,假设有数p,q,满足p*q<=m同时a/b<=p/q<=1,求当p*q最大的p和q的值 方法:暴力枚举 -_-|| and 优化范围 我们可以注意到在某一个m ...

  4. a标签包含块级元素问题

    a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但 ...

  5. 行列转换之静态、动态、PIVOT方法

    /* 标题:普通行列转换(version 2.0) 作者:爱新觉罗.毓华  时间:2008-03-09 地点:广东深圳 说明:普通行列转换(version 1.0)仅针对sql server 2000 ...

  6. 如何在Eclipse和MyEclipse中安装SVN

    在安装目录下,找到dropins文件夹将svn文件复制进去.

  7. js 条件判断放大字体

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  8. log4cxx 使用代码进行配置

    (1)官网的一个例子 #include <log4cxx/logger.h> #include <log4cxx/helpers/pool.h> #include <lo ...

  9. Entity Framework技巧系列之六 - Tip 20 – 25

    提示20. 怎样处理固定长度的主键 这是正在进行中的Entity Framework提示系列的第20篇. 固定长度字段填充: 如果你的数据库中有一个固定长度的列,例如像NCHAR(10)类型的列,当你 ...

  10. flashbuilder mx组件 MenuBar

    来源:http://www.cuplayer.com/player/PlayerCode/Flex/2013/0118661.html <fx:Script> <![CDATA[ i ...