问答详情
源自：3-3 CSS Sprite 应用

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

http://img.mukewang.com/566d39770001b02009680550.jpg为啥文字和图片重合了，设置margin也没用，好像感觉文字和图片是一个整体的

提问者：酋长最帅 2015-12-13 17:26

个回答

  • 狂飙的蜗牛_1
    2015-12-13 22:42:29
    已采纳

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

    0
  • echo_kinchao
    2015-12-13 22:13:07

    图片浮动文字会环绕

    0
  • qq_____暖_0
    2015-12-13 17:33:35

    发一下你的完整代码吧。

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

    <!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