在CSS轉換期間，如何將內聯塊和表格單元元素保持在同一行？

Question

請參閱我的代碼筆： http ://codepen.io/maidson/pen/RNQXMb（相關的SCSS在底部）

的HTML

<div class="email">
    <div id="thanks"><span>Thanks!</span></div>
    <input id="text"></input>
    <button id="btn" data-text-swap="OK">
        Stay Informed
    </button>
</div>

SCSS

.email{
    display: table;
    margin: 0 auto;
    width: 400px;
    input, button{
        display: table-cell;
        height: 60px;
    }
    #thanks{
        width:0px;
        @include vendorize(transition, $transition);
        background: #fff;
        color: #000;
        white-space: nowrap;
        overflow-x: hidden;
        height: 60px;
        display: inline-block;
        text-align: center;
        line-height: 60px;
        span{
            margin: 0 auto;
        }
    }
    input{
        width: 0;
        margin-left: 25%;
        @include vendorize(transition, $transition);
        background: #fff;
        color: #000;
    }
    button{
        width: 50%;
        @include vendorize(transition, $transition);
        white-space: nowrap;
    }
}
.email.focus{
    input{
        width: 85%;
        margin-left: 0%;
    }
    button{
        width: 15%;
    }
}
.email.submit{
    #thanks{
        width: 100%;
        background: #ccc;
    }
    input{
        width: 0%;
        margin-left: 100%;
        background-color: #ccc;
    }
    button{
        width: 0%;
    }
}

我有一個分為兩部分的動畫，我想通過一個框引導用戶進行電子郵件注冊。 當前，一些js用於在第一次單擊時分配class =“ focus”，並在第二次單擊時將其替換為class =“ submit”。

我希望整個序列都保留在單個行中，並且我希望最后一個過渡從左到右擦除（單擊“確定”后）。 當前，＃thanks div導致其他兩個元素溢出到第二行。 我想防止這種情況的發生，同時保留過渡動畫。

我在這里想念什么？ 謝謝！

Answer 1

在CSS底部，嘗試將左邊距更改為0％：

.email.submit{
    #thanks{
        width: 100%;
        background: #ccc;
    }
    input{
        width: 0%;
        margin-left: 0%;
        background-color: #ccc;
    }
    button{
        width: 0%;
    }
}

Answer 2

您可以通過添加定位來做到這一點-

.email{
    position:relative;
    #thanks{
       position:absolute;
    }
}

而已 ：）