关于html，我在css里通过background引入一张图片，但是无论怎么设置，宽高都为0，要怎么解决？
代码如下：<divclass="footer-icon"><ul><li><ahref="#"><spanclass="icon"></span></a></li></u...
代码如下：
<div class="footer-icon">
<ul>
<li>
<a href="#"><span class="icon"></span></a>
</li>
</ul>
</div>
.footer-icon{
width:100%;
height:58px;
margin-top:5%;
background-color:#fff;
padding:2% 5%;
}
.footer-icon li{
float:left;
}
.footer-icon .icon{
background:url(../img/首页/icon.png) no-repeat ;
background-size:50px 80px;
}
设置了width，height也不行。求大神解决，谢谢！ 展开
<div class="footer-icon">
<ul>
<li>
<a href="#"><span class="icon"></span></a>
</li>
</ul>
</div>
.footer-icon{
width:100%;
height:58px;
margin-top:5%;
background-color:#fff;
padding:2% 5%;
}
.footer-icon li{
float:left;
}
.footer-icon .icon{
background:url(../img/首页/icon.png) no-repeat ;
background-size:50px 80px;
}
设置了width，height也不行。求大神解决，谢谢！ 展开
2个回答
展开全部
a标签和span标签默认都是行内元素，如果里面的内容为空（指实际内容如文字和图片为空，即使里面包含了空的行内元素也是不算作实际内容的，此外背景图片也不是实际内容），则它的宽高始终是保持为0的，不管怎么设置都是不行的（你可以试着在span内加入一些文字，它立刻就会有宽高了，但实际上这是文字的宽高，不是span本身的宽高）。
解决办法就是使用块级元素，方法有：
1、直接换用块级元素，比如 div 就是
2、在css中用 display:block 可以把行内元素改成块级元素
3、浮动元素（float:left或float:right）会自动变为块级元素
4、绝对定位（position:absolute）的元素也会变成块级元素
解决办法就是使用块级元素，方法有：
1、直接换用块级元素，比如 div 就是
2、在css中用 display:block 可以把行内元素改成块级元素
3、浮动元素（float:left或float:right）会自动变为块级元素
4、绝对定位（position:absolute）的元素也会变成块级元素
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给ico设置个宽高 。你的代码我试了。没问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0 auto}
ul,li{list-style: none;}
.footer-icon{
width:100%;
height:58px;
margin-top:5%;
background-color:hotpink;
padding:2% 5%;
}
a{display: block;}
.footer-icon ul li a .icon{display: block;height: 80px;width: 100%;
background: url(day1/images/2.jpg) no-repeat;
background-size:100px 90px;
}
</style>
</head>
<body>
<div class="footer-icon">
<ul>
<li>
<a href="#">
<span class="icon">
</span>
</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0 auto}
ul,li{list-style: none;}
.footer-icon{
width:100%;
height:58px;
margin-top:5%;
background-color:hotpink;
padding:2% 5%;
}
a{display: block;}
.footer-icon ul li a .icon{display: block;height: 80px;width: 100%;
background: url(day1/images/2.jpg) no-repeat;
background-size:100px 90px;
}
</style>
</head>
<body>
<div class="footer-icon">
<ul>
<li>
<a href="#">
<span class="icon">
</span>
</a>
</li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
