Question

我有一个ul，其中包含我的信用卡图标。我已将background-image和display:inline用于LI，它们很好地显示在大屏幕上。

但是，在移动设备上，图标被切断。所以我的问题是我可以让它们出现在移动设备的两行中还是可以缩小尺寸。我为transform:scale尝试了max-width:474px，它确实可以工作，但是它将所有图标向右推，即使我添加了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>

我的ul一行上有li元素。我可以做出回应吗？

0 个答案: