将三个span在一个DIV中居中放置,我的代码为什么不能成功?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>span居中</title>
<script type="text/javascript">
var span1=document.getElementById('span1');
var span2=document.getElementById('span2');
var span3=document.getElementById('span3');
var div1=document.getElementById('div1');
var len=span1.length+span2.length+span3.length;
span1.left=(div1.width-len)/2;
</script>
</head>
<body>
<div id="div1" style="width: 500px;height: 100px;border: solid black;">
<span id="span1">1</span>
<span id="span2">2</span>
<span id="span3">3</span>
</div>
</body>
</html>

首先你的JS的位置不对,应该放到</body>前面,其次你可以使用CSS来控制居中啊
<div id="div1" style="width: 500px;height: 100px;border: solid black;text-align:center">
<span id="span1">1</span>
<span id="span2">2</span>
<span id="span3">3</span>
</div>追问

老板不让用CSS,说必须用javascript

追答



span居中

1
2
3

var span1=document.getElementById('span1');
var span2=document.getElementById('span2');
var span3=document.getElementById('span3');
var div1=document.getElementById('div1');
var len=span1.offsetWidth+span2.offsetWidth+span3.offsetWidth;
span1.style.marginLeft=(div1.offsetWidth-len)/2+"px";

那你就这么写

温馨提示:答案为网友推荐,仅供参考
第1个回答  2012-09-29
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>span居中</title>
</head>
<body>
<div id="div1" style="width: 500px;height: 100px;border: solid black;">
<span style="line-height:100px; text-align:center">1</span>
<span id="span2">2</span>
<span id="span3">3</span>
</div>
</body>
</html>追问

老板说要用javascript来实现居中