兄弟元素为什么一直在边上 问题出在小图标与span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS网页布局</title>
<style>
*{
padding: 0;
margin:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.head{
width: 100%;
height: 100px;
}
.logo{
line-height: 100px;
}
.logo img{
float: left;
width: 300px;
height: 90px;
margin-left: 150px;
}
.nav{
float: right;
}
.nav ul li{
float: left;
line-height: 100px;
text-align: center;
font-family: "微软雅黑";
color: gray;
}
.nav ul li a{
margin-right: 55px;
}
.center{
clear: both;
}
.center img{
width: 100%;
height: 600px;
}
.shade{
background: black;
opacity: 0.5;
width: 100%;
height: 600px;
position: absolute;
top: 100px;
left: 0;
}
.link{
position: absolute;
top:400px;
width: 100%;
margin: 0 auto;
height: 300px;
text-align: center;
margin-top: -150px;
}
.link p{
padding-top: 100px;
font-family: "微软雅黑";
font-size: 45px;
font-weight: bold;
color: #FFFFFF;
}
.link button{
width: 200px;
height: 60px;
border-radius: 8px;
background: orangered;
color: white;
margin-top: 50px;
font-family: "微软雅黑";
font-weight: bold;
font-size: 14px;
}
.iconk{
width: 100%;
height:300px;
text-align: center;
}
.iconk ul{
line-height: 300px;
}
.iconk ul li{
line-height: 200px;
width: 300px;
height: 200px;
text-align: center;
display: inline-block;
}
.iconk ul li img{
width: 100px;
height: 100px;
}
.iconk li span{
width: 100px;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<div class="head">
<div class="logo">
<img src="image/logo.png" />
</div>
<div class="nav">
<ul>
<li><a>首页</a></li>
<li><a>图片</a></li>
<li><a>视频</a></li>
<li><a>手记</a></li>
</ul>
</div>
</div>
<div class="center">
<div class="img">
<img src="image/1.jpeg" />
</div>
<div class="shade"></div>
<div class="link">
<p>MY BEAUTIFUL LIFE</p>
<button>LOOK MORE ></button>
</div>
<div class="iconk">
<ul>
<li>
<img src="image/weibo.png"/>
<span>MICROBLOG</span>
</li>
<li>
<img src="image/weixin.png"/>
<span>WECHAT</span>
</li>
<li>
<img src="image/QQ.png"/>
<span>QQ</span>
</li>
</ul>
</div>
<p class="want">
"I want to give good things to record down,<br>after the recall will be very beautiful."
</p>
</div>
</body>
</html>
正在回答
img和span都是行内元素，而且它们的关系是平级的，就是在一排显示的啊。
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星