Question

我是一名新开发人员，我有以下按钮，它是Flex容器内的flex项目div：

file.read(1)

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

选择之前

：

选择后

：

如您所见，按钮下降而不是与输入平行。我怎么能防止这种情况发生？每个兄弟元素都是一个flex-item，父包装器有一个flex-container-wrap类。我试过了<div class="flex-item flex-item-button" > <i class="fa fa-plus-circle big-icon"></i> </div>

根据要求提供更多代码：

position: relative;

Answer 1

我不确定为什么会这样，但你可以尝试将按钮固定在一个位置：

position: fixed;

然后设置您希望它位于屏幕上的位置：

bottom: 100px;
right: 100px;

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

Answer 2

您必须按住给定高度的加号，然后使用绝对定位，顶部和右侧属性值将加号置于您想要的位置。这样，它将始终保留在放置它的位置。

＆＃13;

.flex-container {
  width: 200px; /* Adjust as needed */
  height: 30px; /* Adjust as needed */
  position: relative;/* Helps Curtail Overlap */
  }


.fa-plus-circle.big-icon {
  position: absolute;
  right: -10px; /* Adjust as needed */
  top: 20px;    /* Adjust as needed */
  height: 25px; /* Adjust as needed */
  width: 25px;  /* Adjust as needed */
  z-index: 999;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

＆＃13;

保持按钮就位

2 个答案: