У меня есть ul, который имеет свои элементы li на одной строке. Могу ли я сделать его отзывчивым? - PullRequest
Новая
       12

У меня есть ul, который имеет свои элементы li на одной строке. Могу ли я сделать его отзывчивым?

0 голосов
/ 10 сентября 2018

У меня есть 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>

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Попробуйте заменить эти ... 

.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 и flexbox генератор , с которым вы можете играть.

0 голосов
/ 10 сентября 2018

Вы сделали свои элементы 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>
...