css - 带CSS的向右滑动输入框

Question

有什么方法可以使输入框跨越其父级的右边缘之间的距离，并尽可能向左移动？

我的意思是，假设我有

<div>
    <span>a</span>
    <span>b</span>
    ...
    <input />
</div>

我想让 input 改变宽度，这样如果没有 span，input 就会横跨整个 div，但如果有跨度，它会从左边收缩吗？我将从 javascript 添加 span。

可以用纯 CSS 实现吗？

Answer 1

是的，技术上。

如果只使用 CSS，您需要使用新的 flexbox 模型。

然而，支持是not great .

div {
  width: 30em;
  display: -webkit-flex;
  display: flex;

input {
  width: 100%;
  flex: 1;
}

试试这个 demo在 Chrome 中。

对于不支持候选推荐的其他浏览器的支持，最好的选择是使用一些 Javascript 来根据跨度数添加基于百分比的宽度。