内联元素的空隙，必须是这样用font-size才可以起到消除空隙的效果，我运行结果消除了，不知道对不对
<style type="text/css">
a,span,em{
background:pink;/*设置a、span、em标签背景颜色都为粉色*/
font-size:16px;
}
div{
display:inline;
font-size:0px;
}
</style>
qq_放纵你江湖_0
2015-11-10
4 回答
这个解决方法比较多
1、把所有的标签都写到一行，不要换行就可以
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{
background:pink;/*设置a、span、em标签背景颜色都为粉色*/
font-size:16px;
}
</style>
</head>
<body>
<div>
<a>ldjfl</a><a href="http://www.baidu.com">百度</a><a href="http://www.imooc.com">慕课网</a><span>33333</span><span>44444</span><em>555555</em>
</div>
</body>
</html>2、使用float
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{
background:pink;/*设置a、span、em标签背景颜色都为粉色*/
font-size:16px;
float: left;
}
</style>
</head>
<body>
<div>
<a>ldjfl</a><a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>
</body>
</html>还有你的那种方法都可以
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{
background:pink;/*设置a、span、em标签背景颜色都为粉色*/
font-size:16px;
}
div{
display:inline;
font-size:0px;
}
</style>
</head>
<body>
<div>
<a>ldjfl</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</div>
</body>
</html>
举报
0/150
提交
取消
