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(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
随机推荐
- MVC5 + EF6酒店项目笔记
最近项目组准备用MVC5开发酒店模板包括后台.在此第一次学MVC5一个礼拜,看着组长给我的MVC5模板从一脸懵逼到懵懂. 慢慢学习,成长. 未完待续........
- [转]Ubuntu系统下常用的新建、删除、拷贝文件命令
我们在Ubuntu系统中安装程序时,经常要在usr目录下新建.拷贝文件,此文件夹在Linux类系统中需要root权限才能访问,因此用常规的鼠标右键菜单操作是无效的,今天分享一下在终端中使用命令新建.拷 ...
- vconfig
创建虚拟的vlan设备 例如: vconfig add eth0 10 就创建了一个eth0.10的设备 vconfig的使用说明如下: root@hbg:/# vconfigBusyBox v1 ...
- PBO
#include <GL/glew.h> #include <GL/freeglut.h> #include <iostream> GLuint pboID[]; ...
- Lucene基础(1)
下一篇: Lucene基础(2) 一.Lucene介绍 http://www.kailing.pub/index/columns/colid/16.html Documentation:http:// ...
- OMCS开发手册(02) -- 多媒体连接器
OMCS开发手册(01) -- 多媒体设备管理器 一文,我们从Owner的角度详细描述了多媒体设备管理器的使用,本文我们将站在Guest的角度,描述OMCS中另一类组件/控件:多媒体连接器.多媒体连接 ...
- Chapter 15_1 require函数
Lua提供了一个名为require的高层函数来加载模块,但这个函数只假设了关于模块的基本概念. 对于require而言,一个模块就是一段定义了一些值(函数或者包含函数的table)的代码. 为了加载一 ...
- Openjudge-计算概论(A)-晶晶赴约会
描述 晶晶的朋友贝贝约晶晶下周一起去看展览,但晶晶每周的1.3.5有课必须上课,请帮晶晶判断她能否接受贝贝的邀请,如果能输出YES:如果不能则输出NO. 输入输入有一行,贝贝邀请晶晶去看展览的日期,用 ...
- tomcat源码分析(二)启动过程
在Catalina的load方法中,首先初始化Server组件. // Start the new server if (server instanceof Lifecycle) { try { se ...
- Xcode7修改模块生成网络权限(ATS配置)
直接找 前往->前往文件夹->然后复制下面的路径填入框内,回车就能看到想要替换的文件夹了 /Applications/Xcode.app/Contents/Developer/Pla ...