Html 我有ul，它在一行上有li元素。我能让它响应吗？

我有一个ul包含我的信用卡图标。我在LIs中使用了背景图像和显示：inline，它们很好地显示在大屏幕上

然而，在手机上，图标会被切断。所以我的问题是，我可以让它们出现在手机的两行上，或者缩小尺寸。我尝试了transform:scale for max width:474px，它确实可以工作，但它会将所有图标向右推，即使我添加float:left或text align:left，也不会有任何变化

代码如下：

1.付款方式{ 浮动：左； 空白：nowrap； 列表样式位置：外部； 列表样式类型：disc； 垂直对齐：基线； } .付款方式李{ 背景重复：无重复； 背景尺寸：自动； 显示：内联； 填充：10px 40px； } .付款方式.签证{ 背景图像：urlhttps://via.placeholder.com/40x20; } .付款方式.万事达卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } .付款方式.美国运通卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } .付款方式.发现卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } .付款方式.贝宝卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } 您将元素内联，然后指示其父元素停止换行。如果我们去掉空白指令，那么max width的工作原理与您所期望的一样

1.付款方式{ 最大宽度：200px； 浮动：左； /*空白：nowrap；这就是问题所在*/ 列表样式位置：外部； 列表样式类型：disc； 垂直对齐：基线； } .付款方式李{ 背景重复：无重复； 背景尺寸：自动； 显示：内联； 填充：10px 40px； } .付款方式.签证{ 背景图像：urlhttps://via.placeholder.com/40x20; } .付款方式.万事达卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } .付款方式.美国运通卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } .付款方式.发现卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } .付款方式.贝宝卡{ 背景图像：urlhttps://via.placeholder.com/40x20 } 尝试替换这些

.payment-methods {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
}

.payment-methods li {
    background-repeat: no-repeat;
    background-size: auto auto;
    box-sizing: border-box;
    list-style: none;
    margin: 10px;
    padding: 0;
    height: 20px;
    width: 40px;
}

---

有关和的详细信息，您可以使用。

下次请将代码转换为可运行的代码段。感谢您的回答。下次我会想办法弄清楚这个片段。我删除了“空白：nowrap”；然而，一切都没有改变。使用“宽度”或“最大宽度”似乎也不起作用。是否应该为“空白”使用不同的命令来代替“nowrap”？好吧，它确实有效，但只适用于更宽的分辨率。如果将屏幕缩小为移动宽度屏幕，即使在代码片段中，也只会显示5个图标中的3个。我想缩小它们的尺寸，或者将它们分成两行用于移动设备，假设必须有一些@media屏幕和最大宽度：474px cssEDIT:1000%。我有一些css，我以前添加过，这是扔掉它，但它的作品像一个魅力。特别是，有一次我在ul元素上为@media screen添加了一个宽度，最大宽度：747px；谢谢你抽出时间，伙计！看起来ul上有一个宽度？或者需要调整的东西。你可以让弯曲的元素在彼此之间，所以你应该是好的。有我可以看的网址吗？很好，你100%正确。我已经设置了一个最大宽度：200px，我忘记了。我调整了它，效果很好。现在，我开始使用更多flexbox在任意一侧添加元素：