连接输入字段和按钮增强说唱模式

Question

我正在尝试连接我的输入字段和按钮，同时将字段保持在模态的中心。IE 未向左或向右浮动

目前看起来像这样。

我希望它看起来像这样。

.HTML---

                <div class="input-append">
                    <input id="input-zip" type="search" placeholder="Enter zip code"/>
                    <span class="input-btn">
                        <button type="button" class="btn btn-zip" data-dismiss="modal">CONTINUE</button>
                    </span>
                </div>

.CSS----

.btn-zip {
    float: right;
    background: map-get($colors, bg-btn-card);
    color: map-get($colors, button-text);
    border-radius: 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    display: table;
    margin-bottom: 10px;
}

JQUERY--

$(window).load(function()
{
    $('#zip-modal').modal('show');
});

Answer 1

Flex 来救援：

.input-append{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }

width: 100% - 扩展元素以水平适合整条线，从该宽度计算中心。

justify-content - 内部项目水平居中

align-items - 内部项目垂直居中