首页 新闻 搜索 专区 学院

为什么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错位了

css
一落叶而知秋的主页 一落叶而知秋 | 初学一级 | 园豆:79
提问于:2013-03-11 22:47
< >
分享
最佳答案
1

其本质就是元素对齐方式默认是基于baseline的,由于第一个span包含了文本,所以baseline就在文本与相邻的span底部区域,导致表现出来的错位,可以设置span{vertical-align: top;}统一对齐方式即可,@卿君说的浮动只是用另外一种方案避免了这个问题,但是没有给出问题的本质...

收获园豆:10
三桂 | 老鸟四级 |园豆:3565 | 2013-03-13 11:54
其他回答(3)
0

这个有点问题,貌似是因为里面的文字的影响,你在里面增减文字就会发现块会移动,具体原因还没找到~

韦锦业 | 园豆:157 (初学一级) | 2013-03-11 23:03
0

加个浮动标签如下:就可以正常了

span
{
display:inline-block;
width:100px;
height:100px;
background:green;
float:left;
}

伏草惟存 | 园豆:1420 (小虾三级) | 2013-03-12 07:34

有点意思,确实可以了,但是这是为什么呢

支持(0) 反对(0) 陈希章 | 园豆:2338 (老鸟四级) | 2013-03-12 08:26

@陈希章: 页面正常布局至上而下,但是你要实现左右就需要改变这种束缚了,用float可以改变有限的布局,实现左右平铺

支持(0) 反对(0) 伏草惟存 | 园豆:1420 (小虾三级) | 2013-03-12 08:31
0

空大 SPAN 加上 &nbsp; 就像td一样,加上空格才能能把边框显示出来

geass.. | 园豆:1785 (小虾三级) | 2013-03-12 09:06
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册