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

Posted 2021-04-01

我正在尝试连接我的输入字段和按钮，同时保持字段以我的模态为中心。 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');
});

答案

Flex来救援：

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

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

justify-content - 内部物品水平居中

align-items - 内部物品垂直居中