Question

父元素绝对定位，子元素float，怎么让子元素撑开父元素的width

Answer 1

利用三层结构解决：

<style>
    ul,li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    div {
        position: absolute;
        left: 0;
        top: 0;
        width: 800px;
        height: 100px;
        background: #cccccc;
        white-space:nowrap;
    }
    ul {
        width: 1000%;
    }
    li {
        float: left;
        width: 200px;
        height: 80px;
        background: #f1f1f1;
        margin: 10px 5px;
        white-space:nowrap;
    }
</style>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

如果只有两层结构，也是可以解决的，只是复杂一些。需要利用js，思路是，给子元素也定位，然后通过改变子元素left值实现，如我上述例子中：

给li也定位position: absolute;，第一个li的left:0px;那么第二个li的left: 210px;以此类推