我想制作响应图像滑块，但我将#wrapper ul width更改为max width，因此响应不起作用。我不知道该怎么办。它不好用。请帮我解决这个问题。
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.after::after{
content:'';
display:block;
clear:both;
}
#main{
position:relative;
width:100%;
background:yellow;
margin-top:30px;
}
#wrapper{
position:relative;
max-width:800px;
margin:0 auto;
overflow:hidden;
}
#wrapper ul{
padding:0;
margin:0;
list-style-type:none;
max-width:3200px;/* it doesn't work*/
}
#wrapper ul li{
width:800px;
height:400px;
float:left;
}<html>
<body>
<div id="main" class="after">
<div id="wrapper" class="after">
<ul class="after">
<li style="background:red;"><img src="http://via.placeholder.com/800x400" /></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
<li style="background:purple;"></li>
</ul>
</div>
</div>
</body>
</html>您已经将#wrapper中的最大宽度设置为800px。您已将#wrapper ul的最大宽度设置为3200px。
我可能错了，但从逻辑上讲，ul只会达到800px，因为它里面的包装器的最大宽度设置为800px。
#wrapper ul li {
/* width: 800px; remove it */
height: 400px;
/* float: left; remove it */
}
并添加#wrapper ul li img { max-width : 100% }
一切都会反应完美。
全代码
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.after::after{
content:'';
display:block;
clear:both;
}
#main{
position:relative;
width:100%;
background:yellow;
margin-top:30px;
}
#wrapper{
position:relative;
max-width:800px;
margin:0 auto;
overflow:hidden;
}
#wrapper ul{
padding:0;
margin:0;
list-style-type:none;
max-width:3200px;/* it doesn't work*/
}
#wrapper ul li{
height:400px;
}
#wrapper ul li img { max-width : 100% }<html>
<body>
<div id="main" class="after">
<div id="wrapper" class="after">
<ul class="after">
<li style="background:red;"><img src="http://via.placeholder.com/800x400" /></li>
<li style="background:green;"></li>
<li style="background:blue;"></li>
<li style="background:purple;"></li>
</ul>
</div>
</div>
</body>
</html>