css - 连接输入字段和按钮引导模式

Question

我正在尝试连接我的输入字段和按钮，同时保持该字段在我的模式上居中。 IE不左右浮动

Currently it looks like this.

I want it to look like this.

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 - 内部元素垂直居中