html中label的寬度無法修改,如何设置HTML span、label 的宽度

该文讲述如何设定 HTML span 宽度。 缺省情况 HTML span 的宽度设定无效

在 HTML 中如何设定 span 的宽度?这看上去是个很简单的问题,似乎用 style 中的 width 属性就可以。例如: /p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test Span

span {

background-color:#ffcc00;

width:150px;

}

fixed width span

通过试验以后发现,无效,无论是在Firefox还是IE中都无效。

通过查阅 CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略。Firefox 和 IE 原来是遵循了标准才这样做的。 修改 span 为 block 类型并设置 float 不是完美解决

在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。 span {

background-color:#ffcc00;

display:block;

width:150px;

}

很多人会建议再增加一个CSS 属性 float,这样的确在某种条件下能解决问题。比如我们的例子中,如果span前面没有文字,那的确是可行的。但是如果有了,前后文字就会连在一起,而span跑到了第二行。 span {

background-color:#ffcc00;

display:block;

float:left;

width:150px;

}

其实,在HTML 的各种Element中,的确有既是inline,又能够设定宽度的情况存在。例如下面代码就显示了button对象,就可以很好的在文字中间出现,并且设定宽度。

fixed width button

能不能让 span 象 button 那样显示呢?通过 CSS2标准中display的定义和inline对象的解释,发现CSS2标准的制定者把所有的Element在是否属于inline上做了非此即彼的规定,要么是inline,要么是block,没有制定button那样既是inline,又可以象block那样设置宽度的属性值。 更新的标准CSS 2.1

再看更新的标准,在CSS2.1标准草案中display的定义中增加了一个叫 inline-block 的属性值,针对的恰好是我们面对的这种情形。那么再看看各种浏览器的对应情况。 Firefox

通过display的文档了解到,inline-block在未来的Firefox 3中会实现。通过Mozllia扩展属性参考了解到,在Firefox 3以前的版本,例如现在的Firefox 2中,可以用 -moz-inline-box 达到同样的效果。 IE

通过MSDN中的display文档了解到,inline-block已经实现。实际测试发现IE 6.0及以上版本都没问题。 设置 span 宽度的完美解决方案

下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将 display:inline -block行写在后面,这样在Firefox里面,如果到了未来的Firefox 3,这一行就能起作用,代码可以同时兼容各种版本。 /p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test Span

span {

background-color:#ffcc00;

display:-moz-inline-box;

display:inline-block;

width:150px;

}

fixed width span

该文转自:http://www.blabla.cn/css_kb/html_span_width_kb.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304922.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

27个赢得别人欣赏的诀窍

1.长相不令人讨厌,如果长得不好,就让自己有才气;如果才气也没有,那就总是微笑。2.气质是关键。如果时尚学不好,宁愿纯朴。 3.与人握手时,可多握一会儿。真诚是宝。 4.不必什么都用“我”做主语。 5.不要向朋…

不懂这25个名词,好意思说你懂大数据?

如果你刚接触大数据,你可能会觉得这个领域很难以理解,无从下手。近日,Ramesh Dontha在DataConomy上连发两篇文章,扼要而全面地介绍了关于大数据的75个核心术语,这不仅是大数据初学者很好的入门资料,对于高阶…

您好,dotnet tool

在.net core发布之初,dotnet cli就诞生了,dotnet cli的作用是什么呢?主要是用来创建,还原,构建,发布,测试等一系统管理功能,本来,visual studio中是有这些功能的&#xf…

iphone4 base64 mp3 无法解析 html5,javascript - 如何使用HTML5在firefox上播放base64音频数据? - 堆栈内存溢出...

我正在尝试编码base64格式的mp3文件。 然后通过broswer播放。 它适用于safari和chrome,但不适用于Firefox 。我的问题是“有没有办法让firefox以base64 /二进制字符串格式播放音频文件?”ps:我知道firefox无法播放mp3,所以我尝试过…

ab压力测试_Apache ab压力测试的知识点

Apache-ab是著名的Web服务器软件Apache附带的一个小工具,它可以模拟多个并发请求,测试服务器的最大承载压力。ab 是apachebench的缩写,ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问。它的测试目标是基于URL的&…

现代云原生设计理念

前文传送门什么是云原生?现代设计理念你会如何设计云原生应用程序?需要遵循哪些原则、模式和最佳实践?需要特别关注哪些底层/操作?十二要素应用程序目前被普遍认可的基于云的方法论是"十二要素应用程序",它给…

NFS服务器架设篇

大家好,本周我们的课程是NFS服务器的架设。下面我们分几个部分来介绍NFS服务器。一、NFS简介NFS是分布式计算机系统的一部分,一般在用unix和类unix的系统上实现文件的传输。而且可以把NFS服务器共享的目录挂载到本地,使用cp,cd&am…

mysql 碎片率_MySQL数据碎片的整理和分析

MySQL具有相当多不同种类的存储引擎来实现列表中的数据存储功能。每当MySQL从你的列表中删除了一行内容,该段空间就会被留空。而在一段时间内的大量删除操作,会使这种留空的空间变得比存储列表内容所使用的空间更大。当MySQL对数据进行扫描时&#xff0c…

用画小狗的方法来解释Java中的值传递

在开始看我画小狗之前,咱们先来看道很简单的题目: 下面程序的输出是什么? 如果你的回答是“小强”,好,恭喜你答对了。下面我们改一下代码: 是的,我只是在changeName方法里面加了一句代码 这一次…

html怎么防止表单重复提交,js防止表单重复提交的解决方法

防止表单重复提交,通常会通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,可以给form增加一个submited属性,每次判断这个属性,为 false时继续提交表单并且设置form.submitedtrue&#x…

gif分解工具_Python之GIF图倒放,沙雕快乐源泉

GIF图现在已经融入了我们的日常网络生活,微信群、QQ群、朋友圈......一言不合就斗图,你怕了吗?不用担心,只要学会了Python之GIF倒放技能,你就是“斗图王”。咱们直接开始本文的内容!使用的工具1PIL(Python …

使用Forms Authentication实现用户注册、登录 (三)用户实体替换

使用Forms Authentication实现用户注册、登录 (三)用户实体替换 收藏IPrincipal和IIdentity通过查阅文档,我们可以看到HttpContext.User属性的类型是IPrincipal接口。然而我们知道,接口通常是不能直接访问的,其背后必定…

微软亚洲研究院全球院友线上欢聚,共话新春

金鼠辞旧岁,金牛报春时;万象正更新,乾坤喜气多。西雅图时间 2 月 6 日,北京时间 2 月 7 日,由微软亚洲研究院院友会西雅图分会主办的“牛转新运”院友新春线上茶话会圆满落幕。重量级嘉宾沈向洋、洪小文、张亚勤、张宏…

从串行线程封闭到对象池、线程池

今天讲一个牛逼而实用的概念,串行线程封闭。对象池是串行线程封闭的典型应用场景;线程池糅合了对象池技术,但核心实现不依赖于对象池,很容易产生误会。 本文从串行线程封闭和对象池入手,最后通过源码分析线程池的核心原…

华硕xhci灰色_xHCI模式作怪无法使用USB设备?解决办法这里有!

最近许多云骑士问题群里朋友向我们反映,自己的USB设备包括USB键盘、鼠标、外置网卡......在重装系统后不能使用了或是启动变慢了许多,那么安装完系统后无法使用USB设备怎么办?经过排查,我们发现这是因为intel xHCI模式设置的问题&#xff0c…

netty springmvc_springmvc源码架构解析之HandlerMapping

说在前面前期回顾sharding-jdbc源码解析 更新完毕spring源码解析 更新完毕spring-mvc源码解析 更新完毕spring-tx源码解析 更新完毕spring-boot源码解析 更新完毕rocketmq源码解析 更新完毕dubbbo源码解析 更新完毕netty源码解析 更新完毕spring源码架构更新完毕springmvc源码架…

单片微型计算机系统应用和开发特点,单片微机原理与应用(第2版)

单片微机原理与应用(第2版)语音编辑锁定讨论上传视频《单片微机原理与应用(第2版)》是2019年7月机械工业出版社出版的图书,作者是罗印升。书 名单片微机原理与应用(第2版)作 者罗印升ISBN9787111538851定 价42.0元出版社机械工业出版社出版时间2019年7月装…

腾讯牛逼,我酸了!!

阅读本文大概需要8分钟。腾讯这两天搞了个业内爆炸沸腾的事情:全员阳光普照发放100股,解禁期一年。腾讯股价近年来一直在疯狂上涨,100股折合人民币6万多:关键是员工什么都没做,直接拿到价值6万的股票。作用可以说是相当…

如何创建生成非 MFC 项目的自定义 AppWizards

当自定义的应用程序向导生成一个项目时,则它只是不能替换自动创建的.dsp 项目设置文件。 .dsp 文件中的项目设置由假定所有生成的项目为 MFC 项目的内部规则设置。 但是,Visual C 5.0 的新对象模型允许修改工具设置,以便从生成的项目中删除所…

这本造价500万的“黑科技”日历,用377张爆美插画给你365天理想生活

以前,每个人家里, 都挂着一本日历。 爷爷戴着老花镜, 盘看着黄道吉日; 奶奶一字一句, 念叨着每日禁忌; 我们跟着日历过日子, 时光缓慢,记忆清晰。 那时候,日历本上的日子…