收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 31198|回复: 23

[求助] span 如何设置宽度?

[复制链接]
发表于 2006-5-27 14:40:00 | 显示全部楼层 |阅读模式
代码一:

 提示:您可以先修改部分代码再运行



代码二:

 提示:您可以先修改部分代码再运行



为什么加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句,span的宽度失效了?

[[i] 本帖最后由 blankzheng 于 2007-4-17 09:08 编辑 ]
发表于 2006-5-27 14:51:00 | 显示全部楼层
span不是块级的所以其宽度是依据内容的多少而定,你必需要设定span为BLOCK这样才可以设置宽度!

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2006-5-27 19:31:00 | 显示全部楼层
恩,不错,学习了。呵呵
回复 支持 反对

使用道具 举报

发表于 2006-5-28 19:10:00 | 显示全部楼层
多谢小毅,学到东西咯!!!
回复 支持 反对

使用道具 举报

发表于 2006-5-28 20:37:00 | 显示全部楼层
呵呵,也学到一手!
回复 支持 反对

使用道具 举报

发表于 2006-9-12 06:30:23 | 显示全部楼层
不错的技巧,多谢楼主!!!
回复 支持 反对

使用道具 举报

发表于 2006-9-12 07:26:35 | 显示全部楼层
也可以这样,不设置宽度

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2007-4-17 08:36:14 | 显示全部楼层
原帖由 [i]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啊?

[[i] 本帖最后由 leaon 于 2007-4-17 08:40 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-4-18 13:47:34 | 显示全部楼层
学到点。
回复 支持 反对

使用道具 举报

发表于 2007-4-19 08:40:01 | 显示全部楼层
把span 定义为块级对象,不如直接用div了

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2007-4-19 08:46:19 | 显示全部楼层
原帖由 [i]leaon 于 2007-4-17 08:36 发表



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


这种方法的确不兼容FF,是通过触发span的layout。
回复 支持 反对

使用道具 举报

发表于 2007-4-19 08:54:24 | 显示全部楼层
请问版主
为什么我把他设置为float:left就可以了呢  代码在#10
IE FF都可以
回复 支持 反对

使用道具 举报

发表于 2007-4-19 10:26:55 | 显示全部楼层
有时候是为了更多的利用其它的标签,直接在css里面定义而不必再用class或id调用样式了。大量使用div标签不容易看清结构,就算用退格的形式有时候也容易看走眼,所以有时候还是需要把其它标签定义为块类型调节一下的,当然这种标签最好用没有语义的标签。
回复 支持 反对

使用道具 举报

发表于 2007-4-19 10:44:20 | 显示全部楼层
回小毅:犯了一个常规的小错误display:block; float:left;
浮动对象默认是块,也就没有必要用display:block

回snwebsite ,display:inline-block不兼容
回复 支持 反对

使用道具 举报

发表于 2008-11-5 20:13:51 | 显示全部楼层

用hack

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的宽度"又只有这个帖子靠谱才回复,不是捣乱哈~~
回复 支持 反对

使用道具 举报

发表于 2008-11-5 21:25:13 | 显示全部楼层
用padding-left和padding-right

margin-left和margin-right

是否合适,我在 Fx3 下看有效果。
回复 支持 反对

使用道具 举报

发表于 2008-11-6 09:14:20 | 显示全部楼层
楼上这种方法显示上没有问题,但使内容失去了自由
回复 支持 反对

使用道具 举报

发表于 2008-11-6 09:44:08 | 显示全部楼层
span是内联的,把它表示成块就可以了。display:block;
回复 支持 反对

使用道具 举报

发表于 2008-11-6 11:01:42 | 显示全部楼层
还可以设置内边距,既实际扩大了内容大小。可以不用设定成块
回复 支持 反对

使用道具 举报

发表于 2011-6-2 15:38:52 | 显示全部楼层
o  原来啊
回复 支持 反对

使用道具 举报

发表于 2011-6-3 10:45:30 | 显示全部楼层

span 配display:inline-block

span 配display:inline-block最好用了,很多地方都可以用到。为什么不用block了?如果用block的话他就变成块元素了,要实现多个span并列排版就需要用到float。然而用inline-block的他就不用设置float了但同样可以跟div一样设置宽度高度padding、margin,这样就少了清除浮动的麻烦了,会减少一些不必要的bug发生了
回复 支持 反对

使用道具 举报

发表于 2011-10-9 17:27:22 | 显示全部楼层
提醒:最后回贴距现在 128 天,请不要无意义回复
回复 支持 反对

使用道具 举报

发表于 2011-10-9 20:20:35 | 显示全部楼层
这种情况应该直接用div吧,span不是块级的。
回复 支持 反对

使用道具 举报

发表于 2011-11-1 11:16:01 | 显示全部楼层
2楼方法正解
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2017-10-24 01:12 , Processed in 0.131582 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表