遇到一个样式问题Css
当前盒子水平居中
ul中有6个li里边有div包着img
最外边的盒子div有一个背景图,背景图一个长方形刚好包着 ul
当浏览器宽度变窄的时候 ul 里边的元素都没有自适应缩放。
心累。
贴代码求指教。
<div class="Startthechallengee">
<div>
<ul>
<li>
<div>
<img src="~/assets/img/blrgb/txnk.png">
</div>
</li>
<li>
<div>
<img src="~/assets/img/blrgb/PS5.png">
</div>
</li>
<li>
<div>
<img src="~/assets/img/blrgb/pgsj.png">
</div>
</li>
<li>
<div>
<img src="~/assets/img/blrgb/bx.png">
</div>
</li>
<li>
<div>
<img src="~/assets/img/blrgb/cm.png">
</div>
</li>
<li>
<div>
<img src="~/assets/img/blrgb/xdch.png">
</div>
</li>
</ul>
</div>
</div>
.Startthechallengee{
left: 12%;
position: absolute;
top: 71%;
background-image: url("~/assets/img/blrgb/jpdbt.png");
background-repeat: no-repeat;
background-size: 90% 90%;
width: 80%;
height: 16%;
}
.Startthechallengee img{
width: 180px;
height: 150px;
}
.Startthechallengee ul{
position: absolute;
top: -18%;
left: -6%;
/*position: relative;*/
display: inline-block;
margin-right: 30px
}
.Startthechallengee li{
position: relative;
cursor: pointer;
display: inline-block;
text-align: center;
margin: 0 90px;
color: #dcdcdc;
vertical-align: middle;
}
.Startthechallengee img{
/*width: 1200px;*/
/*height: 170px;*/
/*position: absolute;*/
/*left:18%;*/
/*top: 70%;*/
}