一、形如<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换到下一行。可以采用下面方法实现同行且居右对齐。

1
2
li { position:relative;}
li span{ position:absolute;right:0px;}

即可实现。

文章出处:http://blog.csdn.net/alex197963/article/details/6193887

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. Yii2 使用小部件 Breadcrumbs

    yii有两种Breadcrumbs写法,one: echo Breadcrumbs::widget([ 'itemTemplate' => "<li><i>{l ...

  2. 解决"415 Cannot process the message because the content type 'application/x-www-form-urlencoded' was not the expected type 'text/xml; charset=utf-8'"

    wcf basicHttpBinding content-type    text/xml;charset=utf-8 wsHttpBinding  'application/soap+xml; ch ...

  3. 1014mysqldumpslow.pl简单分析慢日志 WINDOW平台

    转自http://www.th7.cn/db/mysql/201507/113998.shtml 要想运行mysqldumpslow.pl(这是perl程序),下载perl编译器.下载地址:http: ...

  4. Android M 控件:AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout

    AppBarLayout AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar.是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Des ...

  5. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  6. 【转】JSP中文乱码问题终极解决方案

    原文地址:http://blog.csdn.net/beijiguangyong/article/details/7414247 在介绍方法之前我们首先应该清楚具体的问题有哪些,笔者在本博客当中论述的 ...

  7. iOS开发小技巧--实现将图片保存到本地相册

    一.报错的代码 错误 -- out of bounds 超出界限的意思 *** Terminating app due to uncaught exception 'NSInvalidArgument ...

  8. 区间DP HDU 2476

    两个字符串s1,s2 从s1->s2 最少刷几次 刷 i->j 都变成一样的+1 #include<stdio.h> #include<string.h> usin ...

  9. Windows Server 2008 R2 每隔一段时间自动关机解决办法

    情况描述: “我的电脑-->右键属性”中显示“已激活”,而“管理工具”中显示未激活.系统中有进程wlms.exe. 网上找了下解决方式: 1.提权工具:PSTOOLS(下载地址:http://m ...

  10. redis 可视化工具

    Redis Desktop Manager 下载 phpRedisAdmin 是一个用php管理redis的工具 下载