输入附加组件

因为输入组件 CSS 的工作方式，几乎不可能在一个元素之前或之后附加另一个元素，并让它宽度自适应地占满剩余空间。

当前仅有的方法，要么知道输入组件的宽度，要么使用 display:table-cell ，后者有着自己的问题，尤其是绝对定位在跨浏览器时遭遇的困难。

有了 Flexbox 布局，所有的问题都烟消云散，并且代码也极其简单。此外，输入栏和输入附加组件默认同高。

前置附加组件和后置附加组件

HTML 代码

<!-- appending -->
<div class="InputAddOn">
    <input class="InputAddOn-field" />
    <button class="InputAddOn-item">…</button>
</div>

<!-- prepending -->
<div class="InputAddOn">
    <span class="InputAddOn-item">…</span>
    <input class="InputAddOn-field" />
</div>

<!-- both -->
<div class="InputAddOn">
    <span class="InputAddOn-item">…</span>
    <input class="InputAddOn-field" />
    <button class="InputAddOn-item">…</button>
</div>

CSS 代码

.InputAddOn {
    display: flex;
}

.InputAddOn-field {
    flex: 1;
    /* field styles */
}

.InputAddOn-item {
    /* item styles */
}

在 Github 中查看这个 demo 中完整的输入附加组件 源代码