Question

我正在努力将div宽度设置为容器div的剩余宽度。在下面的示例中，我希望红色div（input）占用尽可能多的空间。如果您在input中输入任何内容，则会出现绿色div，它应始终右对齐。

~~我不想使用flex或display: table-*或类似设置overflow: hidden的方法来为浮点数腾出空间。~~

编辑：我正在寻找适用于 IE10 + （包括display: table-*等）的任何解决方案。）

示例：https://codesandbox.io/s/23xo3wjjrp（更改template内的style和/components/SearchBox.vue标记以进行更改

该示例使用vue，但为了完整性，我也在此处发布代码：

HTML

<div class="ms-Fabric ms-SearchBox" :class="searchBoxStyle">

  <div class="ms-SearchBox-iconContainer">
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
  </div>
  <input class="ms-SearchBox-field" type="text" placeholder="Search"      
         v-model="searchQuery" ref="input"
         @blur="onBlur" @focus="onFocus">
  <div class="ms-SearchBox-clearButton" v-show="searchQuery.length > 0"
       @click="clear">
    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Clear"></i>
  </div>
</div>

SCSS

// Active styles
.ms-SearchBox.is-active {
  .ms-SearchBox-iconContainer {
    width: 4px;
    transition: width .167s;
    .ms-SearchBox-icon {
      opacity: 0;
    }
  }
}

// Static styles
.ms-SearchBox {
  display: inline-block;
  font-size: 0px;
  font-weight: 400;
  color: #333;
  border: 1px solid #a6a6a6;
  height: 32px;
  padding-left: 8px;
  width: 208px;

  .ms-SearchBox-iconContainer {
    font-size: 14px;
    color: #106ebe;
    transition: width .167s;
    .ms-SearchBox-icon {
      opacity: 1;
      transition: opacity .167s 0s;
    }
    background: rgba(0, 0, 0, 0.2);
  }

  .ms-SearchBox-field {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    border: none;
    outline: 1px solid transparent;
    height: 32px;
    vertical-align: top;
    background: rgba(255, 0, 0, 0.2);
  }


  .ms-SearchBox-iconContainer,
  .ms-SearchBox-clearButton {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    width: 32px;
    text-align: center;
  }

  .ms-SearchBox-clearButton {
    font-size: 14px;
    background: rgba(0, 255, 0, 0.2);

    &:hover {
      cursor: pointer;
    }
  }
}

Answer 1

您应该尝试将width:100%设置为input，并将position:absolute设置为您的图标容器。在输入上使用填充，这应该做的事情。

希望我理解这个问题：）

CSS填充父宽度

1 个答案: