html 横排展示,不换行

实现思路:

父元素overflow:auto;white-space:nowarp; /*不换行*/子元素display:inline-block; /*行内元素,所以才需要父元素的white-space设置*/

html

<div class="d">        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>        <div class="s1"></div>    </div>

css

.d{            height: 100px;            overflow: auto;             white-space:nowrap;        }        .s1{            width: 100px;            height: 100px;            background: #ccc;            display: inline-block;        }