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样式

如下图

http://img.mukewang.com/climg/5eda00960903709f05300920.jpg

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~


0

0 学习 · 9666 问题

查看课程