我有一个让我发疯的虫子。基本上,我有两个并排的按钮,当我缩小到移动屏幕,然后备份时,按钮不再并排。相反,它们的作用就像其中一个按钮不再浮动一样。当我检查控制台时,该元素已返回float属性,但实际上尚未应用,因此按钮并排出现。。

有人知道这可能是什么原因吗?我到底该如何修复它?玩了几个小时都没有运气。

编辑: 设法重新创建了错误: http://plnkr.co/edit/mbo2f0Xg9lkGou9sx8jl?p=preview

#topics-button-wrapper {
    float: right;
    margin-top: 2px;

    @media screen and (max-width: 600px) {
        float: none;
        display: block;
    }

    > button {

        &:first-of-type {
            float: left;
            margin-right: 10px;
        }

        &:last-of-type {
            float: right;

            @media screen and (max-width: 600px) {
                float: none; //Seem to be keeping this even though it applies 'float: right'
            }
        }
    }
}

标记:

<span class="main-topic">
    <a ng-href="#/{{topic.name}}" ng-bind="topic.name"></a>
    <div class="clear-fix" id="topics-button-wrapper">
        <button data-my-new-topic-slide class="bg-delay button filled round narrow-button">New topic</button>
        <button class="button plain round narrow-button">Statistics</button>
    </div>
</span>

错误发生前的桌面:

查看较小的屏幕:

重新调整为全屏后的桌面: