css field position are change when "X"icon appears [它应该与标题相同]，有人知道解决方案吗？

Question

我正在修复页面中的字段，当我想再添加 1 个字段时，“X”图标将出现在该字段内，另一个字段将改变位置以调整图标位置，但我想让它与标题，如何在同一行中有“X”图标的同时使该字段保持在 sam 位置？

CSS

[
.account-csv-field {
  display: flex;
  align-items: center;
  min-height: 2.8rem;
  &.all-edit-disabled { height: 1rem; }
  .ie-field {
    margin: 0 0.1rem;
    height: 2.8rem;
    &.ie-user {
      flex: 1;
      max-width: 13rem;
    }
    &.ie-password {
      flex: 1;
      max-width: 13rem;
    }
    &.ie-comm-plan {
      flex: 1;
      max-width: 13rem;
    }
    &.ie-model {
      flex: 1;
    }
    &.ie-option {
      flex: 1;
      width: 12px;
    }
  }
.ie-close-button {
    font-size: 20pt;
    margin-left: 0.5rem;
    cursor: grab;
  }]

HTML

<nc-select
      v-if="!account.fromCsv || (initialErrorState.option && !forceEditDisable)"
      class="ie-option ie-field"
      :value="account.option.value"
      :options="options.map(c => c['option'])"
      :error-popup="errorState.option"
      :disabled="options.length < 1 && !account.option.value"
      :required="options.length > 0"
      :error-without-interaction="account.fromCsv"
      @update:value="updateIssuing('option', $event)">
    </nc-select>
    <el-tooltip v-else :content="errorState.option" :disabled="!errorState.option" placement="top" effect="light">
      <span :class="{ 'static-error': Boolean(errorState.option) }" class="cell-option">{{ account.option.value }}</span>
    </el-tooltip>
    <i
      class="el-icon-close ie-close-button"
      v-show="removable"
      @click="$emit('remove')"></i>

Answer 1

使用 position:absolute 跟随类 .ie-close-button 并向其父 dom 提供 position:relative。然后您可以使用 left 和 right 属性根据您的意愿调整关闭位置