使用CSS向右滑动输入框

有没有办法使输入框跨越其父框右边缘之间的距离，并尽可能向左移动

我的意思是，假设我有

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

A.
B
...

我想让

输入

改变宽度，这样如果没有

span

s，

输入

将延伸到整个

div

，但是如果有span，它将从左侧收缩？我将从javascript添加

span

s

在纯CSS中可以做到这一点吗？

是的，从技术上讲

要仅使用CSS，您需要使用新的flexbox模型

然而，支持是有限的

试试这个铬合金的

要在其他不支持候选推荐的浏览器中获得支持，最好使用一点Javascript，根据跨距数添加基于百分比的宽度

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

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