我有一个ul
包含我的信用卡图标。我已经使用background-image
和display:inline
作为LIs,并且它们在大屏幕上显得很好。
但是,在移动设备上,图标会被切断。所以我的问题是我可以让它们在移动设备上显示两行,也可以缩小尺寸。我为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>
尝试更换这些......
.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 generator。
你制作了你的元素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>