overflow-x 无效

Question

html解构如下

    <div>
        <span class="span1"></span>
        <span class="span2"></span>
    </div>

css代码如下

    div{
        width:300px;
        overflow-x:auto;
    }
    span{
        display:inline-block;
        width:200px;
        float:left;
        height:200px;
    }
    .span1{
        background-color:#f00;
    }
    .span2{
        background-color:#00f;
    }

为什么span2会移到下一行，而不是出现水平滚动条？

Answer 1

哈哈，这个问题其实解决起来很简单，，不是overflow-x失效了，，你需要在宽度为300div的里面再加一个div，宽度设置要超过300，这样就会出现横轴滚动条了

Answer 2

你的DIV宽度是300，两个span加起来是400！

Answer 3

float:left;当宽度超过时就会移到下一行

Answer 4

debug上面显示的属性是什么 如果是overflow:hidden
那就是jquery注入$(selector).css("overflow-x":"auto");