当前位置：首页 → 问答吧 → span 如何设置宽度?

span 如何设置宽度?

时间：2006-05-27

来源：互联网

代码一：

<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"> <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的宽度失效了？

[ 本帖最后由 blankzheng 于 2007-4-17 09:08 编辑 ]

作者: woodeye 发布时间: 2006-05-27

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>
提示：您可以先修改部分代码再运行

作者: 小毅发布时间: 2006-05-27

恩，不错，学习了。呵呵

作者: fengbuhuo 发布时间: 2006-05-27

多谢小毅,学到东西咯!!!

作者: LeeStyle 发布时间: 2006-05-28

呵呵，也学到一手！

作者: mymike 发布时间: 2006-05-28

不错的技巧,多谢楼主!!!

作者: dx1 发布时间: 2006-09-12

也可以这样，不设置宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style> span{display:inline-block;background:#f00;padding:10px;} </style> <span> ddddddddddd</span>
提示：您可以先修改部分代码再运行

作者: snwebsite 发布时间: 2006-09-12

引用:

原帖由 snwebsite 于 2006-9-12 07:26 发表
也可以这样，不设置宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equi ...

9月份的帖还要顶~~snwebsite，你这种方法不兼容FF啊？

[ 本帖最后由 leaon 于 2007-4-17 08:40 编辑 ]

作者: leaon 发布时间: 2007-04-17

学到点。

作者: karlen 发布时间: 2007-04-18

把span 定义为块级对象，不如直接用div了

作者: colinivy 发布时间: 2007-04-19

引用:

原帖由 leaon 于 2007-4-17 08:36 发表

9月份的帖还要顶~~snwebsite，你这种方法不兼容FF啊？

这种方法的确不兼容FF，是通过触发span的layout。

作者: blank 发布时间: 2007-04-19

请问版主
为什么我把他设置为float:left就可以了呢代码在#10
IE FF都可以

作者: colinivy 发布时间: 2007-04-19

有时候是为了更多的利用其它的标签，直接在css里面定义而不必再用class或id调用样式了。大量使用div标签不容易看清结构，就算用退格的形式有时候也容易看走眼，所以有时候还是需要把其它标签定义为块类型调节一下的，当然这种标签最好用没有语义的标签。

作者: bluealarm 发布时间: 2007-04-19

回小毅：犯了一个常规的小错误display:block; float:left;
浮动对象默认是块，也就没有必要用display:block

回snwebsite ，display:inline-block不兼容

作者: yougucaofan 发布时间: 2007-04-19

span在ff2中不识别 display:inline-block的设置，加上display:-moz-inline-box;就可以了。

好似
display:-moz-inline-box;要写在前面，display:inline-block写后面。
比如：
#except span{
display:-moz-inline-box;
display:inline-block
}
这样到了ff3也可以识别。

ps：我是看这个帖子好似没特方便的解决方案，可上网搜"span的宽度"又只有这个帖子靠谱才回复，不是捣乱哈～～

作者: Amyni 发布时间: 2008-11-05

用padding-left和padding-right
或
margin-left和margin-right

是否合适，我在 Fx3 下看有效果。

作者: wangkaye 发布时间: 2008-11-05

楼上这种方法显示上没有问题，但使内容失去了自由

作者: hzhjun 发布时间: 2008-11-06

span是内联的，把它表示成块就可以了。display：block；

作者: linsen214 发布时间: 2008-11-06

还可以设置内边距，既实际扩大了内容大小。可以不用设定成块

作者: grainrain 发布时间: 2008-11-06

o 原来啊

作者: xiaoshihehe 发布时间: 2011-06-02