默认span的宽度是自适应内容的。
span标记的样式设定width属性:
<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句,span的宽度失效,会发现不会产生效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<span style="width:80%">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
如果设置display:block,width属性生效,但是此时的span跟div一样了。 DIV会自动换行
span不是块级的所以其宽度是依据内容的多少而定,你必需要设定span为BLOCK这样才可以设置宽度!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<span style="width:80%; display:block; float:left; ">新闻标题</span><span style="20%">2006-5-27</span>
</body>
</html>
如果设置display:inline-block,则span并列在同行,而且width属性生效。
元素display属性的常见值说明:
block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。
inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non:隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间。
设置 span 宽度的完美解决方案 (不自动换行)
下面代码的 CSS定义完美解决了span的宽度设置问题。代码可以同时兼容IE/FF各种版本。 <style type="text/css"> span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;} </style>
|
分享到:
相关推荐
但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。 原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个...
Span的宽度依照包围着对象的宽度而定,所以不能用宽度属性width设置span标记内对象的宽度,但可以设置span的margin(外补丁)值,span中的对象位置与父对象的距离 l Div 块元素 100% 会换行 l Span 行内元素 ...
在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...
// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } --------------------------------------------------...
碰到一个问题,就是在页面展示的时候,很多情况下需要对显示的文字做折行处理,例如文字超过TD的宽度,或者DIV的宽度等等。... 条件所限,blog不能上传附件,我在这里解释一下代码。 代码有2部分,一个是“tex
标签的显示模式(重点) div和span标签 1.样式完全相同,标签不同,显示的结果完全不同 2.每个div会独占一行,多个span会并列一排 1.块元素 ...特点:只能设置宽和高,不能换行显示—img input
span标签 当内容超出 强制不断行 自动换行 复制代码代码如下: white-space:nowrap;white-space:norma;display:inline-block; 超出自动隐藏 英方不断行显示 (必须在块元素内) 复制代码代码如下: overflow:hidden;...
标签的显示模式(重点) div和span标签 1.样式完全相同,标签不同,显示的结果完全不同 ...特点:只能设置宽和高,不能换行显示—img input 示意图 多学一招:从大的方面来说,其实行内的块元素也属于行内元素
不能调节框架大小.html 演示不能调节框架大小。 不支持框架.html 演示不支持框架情况。 垂直分栏.html 演示垂直分栏。 导航框架.html 导航框架的用法。 导航框架链接.html 导航框架链接的用法...
-尽管TabStrip, From, Tree, Accordion继承了Items属性,但是你并不能对其设置(此时Items是只读的). -这将会影响所有的aspx页面,一定要将工具条(Toolbars)和Items区分开来。 -祝你生日快乐 - 小师妹妹。 ...
-尽管TabStrip, From, Tree, Accordion继承了Items属性,但是你并不能对其设置(此时Items是只读的). -这将会影响所有的aspx页面,一定要将工具条(Toolbars)和Items区分开来。 -祝你生日快乐 - 小师妹妹。 ...
css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、...
第一:行内元素与宽度 宽度不起作用 复制代码代码如下: span { width:200px; } 没有变化 第二:行内元素与高度 高度不起作用 复制代码代码如下: span{ height:200px; } 没用变化 第三:行内元素与padding,...
2.3.6 设置网页文字及语言 22 2.3.7 设置网页的定时跳转 23 2.3.8 设定有效期限 24 2.3.9 禁止从缓存中调用 24 2.3.10 删除过期的cookie 25 2.3.11 强制打开新窗口 25 2.3.12 设置网页的过渡效果 26 ...
虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,而CSS很巧妙地解决了这个问题,请看下面的代码: 代码一:用于非表格LI或span等都可以 复制代码代码如下:.text-overflow { display:block;/*内联...
行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化 块级元素可以设置 width, height属性,行内元素设置width, height无效 (注意:块级元素即使设置了...
9.2.2 设置表格边框线条宽度(border属性) 9.2.3 设置表格宽度(width属性) 9.2.4 表格在页面中的对齐(align属性) 9.2.5 表格的描述(summary属性) 9.2.6 表格的背景色(bgcolor属性) 9.2.7 表格中单元格的间距和衬距...
这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构...
11.7 设置元素的高度和宽度 214 11.8 在元素周围添加内边距 217 11.9 设置边框 219 11.10 设置元素周围的外边距 222 11.11 使元素浮动 224 11.12 控制元素浮动的位置 226 11.13 对元素进行相对...