如何设置span宽度

最近制作网站时发现给span设置宽度会无效，通过查阅CSS2标准中关于width 的定义发现，原来CSS中的 width 属性并不总是有效的，如果对象是 inline 对象，width 属性就会被忽略，Firefox 和 IE 是遵循CSS标准，因而直接设置span宽度会无效。
在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;}
下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度，所以最好将 display:inline -block行写在后面，这样在Firefox里面，如果到了未来的Firefox 3，这一行就能起作用，代码可以同时兼容各种版本。
例：span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
当新建HTML时加上了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

时间： 2024-10-13 16:07:40

如何设置span宽度的相关文章

为什么没法设置span的宽度和高度

为什么没法设置span的宽度和高度: 很多刚开始学习div+css布局的时候可能会碰到这样的问题,使用CSS代码无法设置span的高度和宽度,尽管CSS代码没有错误,却无法生效.例如 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/"

css设置span元素的尺寸:在默认状态下是无法设置span元素的尺寸的,只能够根据内容的尺寸自适应,也就是说给span元素设置width和height属性默认条件是无效的.之所以会出现这种情况是因为span元素是内联元素,内联元素无法设置尺寸的,只要设置为块级或者内联块级元素即可.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&qu

table表格宽带研究（附带：table表格为什么设置td宽度无效）

情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一定的误差,因为600px还包括边框,因此实际宽度可能是198px,这里进行了简化,下同). <table style="width:600px; background-color:red" > <tr> <td>1</td> <td&g

UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏幕的宽度. 普通情况下可以设置scalesPageToFit＝YES并且td的宽度按百分比设置下就行.实例如下: 1.创建WebView {//创建WebView CGFloat webX = 0; CGFloat webY = offset_y; CGFloat webW = kAllWidth;

html 中设置span的width完美解决方法

在默认情况下,由于span是行标签,设置width是无效的.只有改变display的属性,才可以实现设置宽度. 1.初步想法 span{ background-color:#ccc; display:block; width:50px; } 如果想span单独成行,不与前后内容链接,可以这样写.如果不想如此,还需修改: 2.再次修改,用上float,变成同行 span{ background-color:#ccc; display:block; float:left; width:50px; }

设置street宽度

当我们在进行建模的时候,如果希望根据数据不同的属性构建模型,在GUI中可能设置起来有一定的难度,本文以原本宽度不一致的道路为例,介绍如何使用Python来增加这些道路的宽度. 创建新的Python脚本在菜单中选择File → New ... → Python → Python Module,在向导中确定脚本的存储位置以及名称命名为:setStreetWidths,并且选择Module:Main模板. 2. 在python编辑器中添加下面的语句 def incrementStreetWidth(

文本框设置100%宽度，内容过多时所在td的宽度失效

最近在修改项目的一个需求变更时,无意间发现了以前的一个问题, 这里拿出来讨论,可能在其他项目中没有碰到这样的需求或者无意中规避了这个问题也或许已经有html&CSS高手把问题解决,都请来分享一下经验: 问题描述如下因为客户不太懂技术,把上述td的宽度设置了百分比,然后为了好看又把里面的文本框也设置了width:100%,想让他自适应更改之后变成这样 1 <html> 2 <head> 3 4 </head> 5 <body> 6 <tab

设置span在div中垂直居中

转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居中 <div style="display:table-cell;height:100px;font-size:12px;font-height:14px;vertical-align:middle;text-align:center"> <span> ceshic

VUE-013-为elementUI 设置 tootip 宽度

在表格显示列表中,通常添加 :show-overflow-tooltip="true" 以显示不能完全展示的单元格文案提示.单通常显示为全屏宽度,不易查看,可通过设置全局的样式,进行控制. 在 App.vue 中添加如下样式设置,即可实现. <style> .el-tooltip__popper { max-width: 60%; } </style> PS:在页面的<style scope> 中设置如上样式,不会生效. 原文地址:https://w