Question

我想制作响应式图像滑块，但我将#wrapper ul width更改为max-width，因此响应式不起作用。我不知道该怎么办。它无法正常工作。请为我解决这个问题。 / p>

legacy-attribute-name="someValue"

*{
  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;
}

Answer 1

您已将#wrapper中的最大宽度设置为800px。您已将#wrapper ul的最大宽度设置为3200px。

我可能会弄错了，但是从逻辑上讲，ul只会达到800px，因为它里面的包装器的最大宽度设置为800px。

Answer 2

#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>

响应式最大宽度不起作用

2 个答案: