gallery部分图片不能显示在一排
来源:4-3 项目作业
慕侠92699508
2020-06-05 14:17:58
.gallery{
width: 1280px;
padding-top: 30px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.gallery .gallery-text h3{
color: black;
font-size: 45px;
text-align: center;
}
.gallery .gallery-text label{
background-color: #07cbc9;
width: 40px;
height: 2px;
margin: 15px auto;
display: block;
}
.gallery .gallery-text p{
color: black;
font-size: 15px;
text-align: center;
line-height: 25px;
width: 40%;
margin: 20px auto;
}
/*.gallery .gallery-img ul{
width: 1280px;
}*/
.gallery .gallery-img ul li{
width: 360px;
float: left;
margin-top: 25px;
margin-left: 25px;
list-style: none;
}
.gallery .gallery-img .info{
background-color: black;
width: 360px;
height: 50px;
}
.gallery .gallery-img .info p{
color: white;
text-align: left;
font-size: 15px;
}
<div class="gallery">
<div class="gallery-text">
<h3>GALLERY</h3>
<label class="gallery-line"></label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</div>
<div class="gellery-img">
<ul>
<li>
<img src="images/03-01.jpg">
<div class="info">
<p>SCIENCE LAB</p>
</div>
</li>
<li>
<img src="images/03-02.jpg">
<div class="info">
<p>INDOOR STADIUM</p>
</div>
</li>
<li>
<img src="images/03-03.jpg">
<div class="info">
<p>TRANSPORTATION</p>
</div>
</li>
<li>
<img src="images/03-04.jpg">
<div class="info">
<p>KIDS ROOM</p>
</div>
</li>
<li>
<img src="images/03-05.jpg">
<div class="info">
<p>MEDITATION CLASSES</p>
</div>
</li>
<li>
<img src="images/03-06.jpg">
<div class="info">
<p>KIDS PLAY GROUND</p>
</div>
</li>
</ul>
</div>
</div>
1回答
好帮手慕阿园
2020-06-05
同学你好,因为同学在html页面中定义的名字叫"gellery-img",css样式中写的是"gallery-img",所以加载不到css样式
如下图
如果我的回答解决了你的疑惑,请采纳,祝学习愉快~
相似问题
回答 2
回答 3