要求在在1300px的时候显示4个，出现横向滚动条
布局：html内
<div class="main-wrapper"> <ul class="ul-list"><li>1</li><li>2</li><li>3</...
要求在在1300px的时候显示4个，出现横向滚动条
布局：html内
<div class="main-wrapper">
<ul class="ul-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
css如下：
方法一：行内元素
.main-wrapper{
overflow: auto;
}
.ul-list{
width: 100%;
font-size: 0;
overflow: auto;
li{
width: 25%;
min-width: 252px;
display: inline-block;
background: red;
border:1px solid #ccc;
font-size: 14px;
}
}
@media (max-width:1300px){
.ul-list{
width: 1008px;
}
}
方法二：弹性布局
.ul-list{
width: 100%;
display: flex;
flex-wrap: wrap;
li{
width:25%;
min-width: 252px;
display: inline-block;
background: red;
border:1px solid #ccc;
font-size: 14px;
}
}
@media (max-width:1300px){
.ul-list{
width: 1008px;
}
}
如需要再某个分辨率下显示多少列的话，可以用弹性盒模型+媒体查询 然后 li的宽度等于列数/100%;
