html文件
<html>
<head>
<meta charset="utf-8">
<title>新闻item横向排列</title>
<!-- <link rel="stylesheet" href="iconfont/iconfont.css"> -->
<link rel="stylesheet" href="css/item.css">
</head>
<body>
<main>
<div id="top">
<span>图片新闻</span>
<span>PHOTOS</span>
<img src="img/youxiajiao.png" alt="">
</div>
<div id="content">
<ul>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
<li><a href="#">
<img src="img/item-1.png" alt="">
<p>花海与列车春天相遇</p>
</a></li>
</ul>
</div>
</main>
</body>
</html>
css文件
body{
margin: 0;
/* 去除标签之间的空白间隔 之后需要单独设置标签字号 */
font-size: 0;
}
main{
width: 1150px;
margin: 100px auto;
border: 1px lightgray solid;
}
#top{
height: 40px;
line-height: 40px;
width: 1100px;
margin: 0 auto;
border-bottom: 1px lightgray solid;
}
#top span:nth-child(1){
color:rgb(37,66,130);
font-size:28px;
font-weight: bold;
}
#top span:nth-child(2){
font-size:17px;
color: lightgray;
}
#top img{
width:17px;
}
#content{
width:1100px;
margin: 20px auto;
}
#content ul{
/* 定宽居中 */
margin: 0;
padding: 0;
}
#content ul li{
list-style: none;
display: inline-block;
width: calc((1150px - 60px) / 5);
box-sizing: border-box;
padding: 5px;
}
#content ul li img{
width: 100%;
}
#content ul li p {
margin: 5px auto;
text-align: center;
}
#content ul li a{
text-decoration: none;
color: balck;
font-size: 14px;
}