DIV定位以及SPAN设置宽度问题

如何能让一个DIV相对BODY居中,<divstyle=width:500;height:200;background-color:#006699></div>,span... 如何能让一个DIV相对BODY居中,<div style=width:500;height:200;background-color:#006699></div> ,span怎么设置宽度? 展开
 我来答
匿名用户
2013-03-28
展开全部
div相对于body居中代码:<div id="mydiv" style=" margin:0 auto;"> 制作网站时发现给span设置宽度会无效,通过查阅CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效。如何设置span宽度:1.修改 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;}如何设置span宽度:2.将 display:inline -block行写在后面

下面代码的 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" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,span的宽度就会失效,这是由于此句声明了HTML代码遵循W3C标准。如何设置span宽度,span宽度无效就可以通过以上方法解决了。
匿名用户
2013-03-28
展开全部
width:500px;margin:0 auto;span不能设置宽度。它是内联标签.你可以让它浮动,浮动后内联标签就能表现出块的性质。在设置宽度就管用了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友91aae1f
2013-03-29 · TA获得超过115个赞
知道答主
回答量:95
采纳率:100%
帮助的人:32.6万
展开全部
span是行标记,你要先把它设置成块标记才可以设置它的宽度span{display:block;width:200px;}
至于div居中嘛,div{margin:0 atuo;}就好了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-03-28
展开全部
首先你的width最好加上px <div style="width:500px;height:200px;margin:0px auto;"></div>至于SPAN你需要先设置他的display:block;<span style="display:block;width:500px;"></span> 这样你就不搓了!再不OK的话就是你人丑了!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
叶灵痕
2013-03-27 · TA获得超过274个赞
知道小有建树答主
回答量:180
采纳率:0%
帮助的人:133万
展开全部
相对body居中很简单,只需要在属性里加一个 margin-left:'auto'就完全可以了,
span设置宽度先在属性里加一个display:block 就可以正常设置宽度了~
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式