html - 将按钮保持在原位

Question

我是一名新开发人员，我有以下按钮，它是 flex 容器内的 flex item div:

<div class="flex-item flex-item-button" >
                <i class="fa fa-plus-circle big-icon"></i>
            </div>

兄弟 div 是输入/提前输入，当用户选择时，所选值显示在输入下方，导致容器调整大小:

选择前:

选择后:

如您所见，按钮下降而不是与输入平行。我怎样才能防止这种情况发生？每个兄弟元素都是一个 flex-item，父包装器具有 flex-container-wrap 类。我试过 position: relative;

请求的更多代码:

<div class="flex-container wrap">
                <div class="flex-item">
                    <select name="customerDropdown" data-ng-model="customer.selected"></select>
                </div>
                <div class="flex-item">
                    <input id="vin-input" ng-change="onChange()"
                </div>
                <div class="flex-item "
                     >
                    <auto-complete><auto-complete>
                </div>
                <div>

                    <auto-complete i><auto-complete>
                </div>
                <div class="flex-item"
                     >
                    <auto-complete></auto-complete>

                </div>
                <div class="flex-item" >

                    <multiselect-dropdown><multiselect-dropdown>
                </div>

                <div class="flex-item flex-item-button">
                    <i class="fa fa-plus-circle big-icon"></i>
                </div>
            </div>

Answer 1

我不确定为什么会发生这种情况，但您可以尝试将按钮固定在某个位置:

position: fixed;

然后设置你希望它在屏幕上的位置:

bottom: 100px;
right: 100px;

编辑:上面给出的 px 不是你想要的，它只是一个如何做的例子