我有 ul，它的 li 元素在一行中。我可以让它响应吗？

Question

我有一个 ul 包含我的信用卡图标。我对 LI 使用了 background-image 和 display:inline，它们在大屏幕上显示得很好。

但是，在移动设备上，图标会被截断。所以我的问题是我可以让它们在移动设备上显示在两条线上，或者只是缩小尺寸。我为 max-width:474px 尝试了 transform:scale，它确实有效，但它会将所有图标推到右边，即使我添加 float:left 或 text-align:left，也没有任何变化。

代码如下：

.payment-methods {
  float: left;
  white-space: nowrap;
  list-style-position: outside;
  list-style-type: disc;
  vertical-align: baseline;
}

.payment-methods li {
  background-repeat: no-repeat;
  background-size: auto auto;
  display: inline;
  padding: 10px 40px;
}

.payment-methods .visa {
  background-image: url("https://via.placeholder.com/40x20");
}

.payment-methods .mastercard-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .american-express-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .discover-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .paypal-card {
  background-image: url("https://via.placeholder.com/40x20")
}

<ul class="payment-methods">
  <li class="visa"></li>
  <li class="mastercard-card"></li>
  <li class="american-express-card"></li>
  <li class="discover-card"></li>
  <li class="paypal-card"></li>
</ul>

Answer 1

您制作了您的元素 inline，然后指示其父元素停止换行。如果我们去掉 white-space 指令，max-width 会像你期望的那样工作。

.payment-methods {
  max-width: 200px;
  float: left;
  /*white-space: nowrap; this is the issue */
  list-style-position: outside;
  list-style-type: disc;
  vertical-align: baseline;
}

.payment-methods li {
  background-repeat: no-repeat;
  background-size: auto auto;
  display: inline;
  padding: 10px 40px;
}

.payment-methods .visa {
  background-image: url("https://via.placeholder.com/40x20");
}

.payment-methods .mastercard-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .american-express-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .discover-card {
  background-image: url("https://via.placeholder.com/40x20")
}

.payment-methods .paypal-card {
  background-image: url("https://via.placeholder.com/40x20")
}

<ul class="payment-methods">
  <li class="visa"></li>
  <li class="mastercard-card"></li>
  <li class="american-express-card"></li>
  <li class="discover-card"></li>
  <li class="paypal-card"></li>
</ul>

Answer 2

尝试替换这些...

.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;
}

关于 flexbox and a flexbox generator 的更多信息，您可以一起玩。

我有 ul，它的 li 元素在一行中。我可以让它响应吗？

I have ul that has its li elements on one line. Can i make it responsive?

html

css

html-lists

responsive