CSS中如何把Span标签设置为固定宽度
一、形如<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标签设置为固定宽度的更多相关文章
- CSS 中如何把 Span 标签设置为固定宽度
一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...
- css中的border-collapse属性如何设置表格边框线?(代码示例)
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
- span标签设置margin-top没有效果
<span>是行内元素,span只有margin-left和margin-right才有效果.要想margin-top生效就要把span转给块级元素才行.在span的css中加入以下属性即 ...
- display:block; 块级元素。<a>,<span>标签设置宽度和高度
display:block;是让对象成为块级元素(比如a,span等) 转化后 可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http: ...
- 有关CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- css中关于table的相关设置
一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...
- CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- CSS中cursor属性给标签加上小手形状
HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
随机推荐
- ubuntu下pip install mysql-python 失败的解决方案
ubuntu连接mysql 需要安装mysql-python 出现can not find mysql-config 文件错误 先安装 sudo apt-get install libmysqld-d ...
- offsetWidth,offsetHeight到底该如何理解?
1.对象的可见宽度(对象指body.div等) 2.offsetWidth可以返回div的宽 3.offsetWidth=width+padding+border(不包括margin外边距) 4.返回 ...
- 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 ...
- a标签包含块级元素问题
a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但 ...
- 行列转换之静态、动态、PIVOT方法
/* 标题:普通行列转换(version 2.0) 作者:爱新觉罗.毓华 时间:2008-03-09 地点:广东深圳 说明:普通行列转换(version 1.0)仅针对sql server 2000 ...
- 如何在Eclipse和MyEclipse中安装SVN
在安装目录下,找到dropins文件夹将svn文件复制进去.
- js 条件判断放大字体
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- log4cxx 使用代码进行配置
(1)官网的一个例子 #include <log4cxx/logger.h> #include <log4cxx/helpers/pool.h> #include <lo ...
- Entity Framework技巧系列之六 - Tip 20 – 25
提示20. 怎样处理固定长度的主键 这是正在进行中的Entity Framework提示系列的第20篇. 固定长度字段填充: 如果你的数据库中有一个固定长度的列,例如像NCHAR(10)类型的列,当你 ...
- flashbuilder mx组件 MenuBar
来源:http://www.cuplayer.com/player/PlayerCode/Flex/2013/0118661.html <fx:Script> <![CDATA[ i ...