span直接一行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span{
background-color: red;
}
</style>
</head>
<body>
<span>1</span><span>2</span>
</body>
</html>
float浮动
<style type="text/css">
span{
background-color: red;
float: left;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
</body>
父级元素添加font-size:0;子集元素font-size:自己根据效果添加数值
<style type="text/css">
.div{
font-size: 0px;
}
span{
font-size: 12px;
}
</style>
</head>
<body>
<div class="div">
<span>1</span>
<span>2</span>
</div>
</body>
由于内层border和外层border引起的空隙
border-right:根据效果自己调整数值