                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧图应用

为什么我的背景图片和文字重合了，我图片设置了浮动的哇

为啥文字和图片重合了，设置margin也没用，好像感觉文字和图片是一个整体的

酋长最帅

2015-12-13

源自：CSS Sprite雪碧图应用 3-3

关注问题我要回答

5631

操作

收起

3 回答

狂飙的蜗牛_1 回答被采纳 +3 积分
2015-12-13

把文字放到 i 标签的外面就好了，背景图片本来就是做背景的，不在文字背后怎么能叫背景

0 回复有任何疑惑可以回复我~

收起回答

酋长最帅提问者

- -!对头哈，脑壳卡了。谢谢

2015-12-13 回复有任何疑惑可以回复我~

echo_kinchao
2015-12-13

图片浮动文字会环绕

0 回复有任何疑惑可以回复我~

收起回答

qq_____暖_0
2015-12-13

发一下你的完整代码吧。

以下是我的代码。你可以参考一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{padding: 0;margin: 0}
ul{list-style: none;}
li{line-height: 31px;display: block;height: 31px;overflow: hidden;border-bottom: 1px solid #dedede}
li h3{font-size:14px;font-weight: 400}

.main{
margin: 10px 10px;
width: 150px;
background: #f8f8f8;
border: 1px solid #ddd;
}

.cat-1 i{background-position: 0 0;}
.cat-2 i{background-position: 0 -24px;}
.cat-3 i{background-position: 0 -48px;}
.cat-4 i{background-position: 0 -72px;}
.cat-5 i{background-position: 0 -96px;}
.cat-6 i{background-position: 0 -120px;}
.cat-7 i{background-position: 0 -144px;}
.cat-8 i{background-position: 0 -168px;}
.cat-9 i{background-position: -40px 0px;}


li i{ background: url(sidebar.png);display: block;width: 30px;height: 24px;float: left;margin: 3px 10px;}
</style>
<body>

<div>
<ul>
<li>
<i></i>
<h3>服装内衣</h3>
</li>
<li>
<i></i>
<h3>鞋包装饰</h3>
</li>
<li>
<i></i>
<h3></h3>
</li>
<li>
<i></i>
<h3></h3>
</li>
<li>
<i></i>
<h3></h3>
</li>
<li>
<i></i>
<h3></h3>
</li>
<li>
<i></i>
<h3></h3>
</li>
<li>
<i></i>
<h3></h3>
</li>
<li>
<i></i>
<h3>其他分类</h3>
</li>
</ul>
</div>

</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答