css 父元素的宽度随子元素的宽度变化

当最外面的层想要设置一个 overflow: hidden，但子元素又想他们能滚动，像今日头条的滚动导航一样：

html：

<div id="wrapper">
  <ul id="scroll">
    <li>cell 1</li>
    <li>cell 2</li>
    <li>cell 3</li>
    <li>cell 4</li>
    <li>cell 5</li>
    <li>cell 6</li>
    <li>cell 7</li>
    <li>cell 8</li>
    <li>cell 9</li>
    <li>cell 10</li>
    <li>cell 11</li>
    <li>cell 12</li>
    <li>cell 13</li>
    <li>cell 14</li>
  </ul>
</div>

css：

#wrapper{
    width: 100%;
    height: 60px;
}
#scroll{
    height: 60px;
    white-space: nowrap;
    display: inline-flex;
}
#scroll li{
    float:left;
    height: 60px;
    background: #eee;
    border: 1px solid #ddd;
    width: 100px;
    box-sizing: border-box;
}
#scroll:after{
    content: " ";
    display: block;
    height: 0;
    font-size: 0;
}

这样写里面的子元素  scroll的宽度就可以随着li的增加减少而改变，在这里引用iscroll可以向右滑动

 

转载于:https://www.cnblogs.com/siyecao2010/p/9202920.html