为什么span错位了
0
悬赏园豆：10
[已解决问题]
解决于 2013-03-20 17:42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>学习</title>
<style type="text/css">
span
{
display:inline-block;
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div>
<span>您好</span>
<span></span>
<span></span>
</div>
</body>
</html>
为什么span错位了
最佳答案
1
其本质就是元素对齐方式默认是基于baseline的,由于第一个span包含了文本，所以baseline就在文本与相邻的span底部区域，导致表现出来的错位，可以设置span{vertical-align: top;}统一对齐方式即可，@卿君说的浮动只是用另外一种方案避免了这个问题，但是没有给出问题的本质...
收获园豆：10
其他回答(3)
0
这个有点问题，貌似是因为里面的文字的影响,你在里面增减文字就会发现块会移动，具体原因还没找到~
0
加个浮动标签如下:就可以正常了
span
{
display:inline-block;
width:100px;
height:100px;
background:green;
float:left;
}
有点意思，确实可以了，但是这是为什么呢
@陈希章: 页面正常布局至上而下,但是你要实现左右就需要改变这种束缚了,用float可以改变有限的布局,实现左右平铺
0
空大 SPAN 加上 就像td一样，加上空格才能能把边框显示出来
