使用CSS向右滑动输入框

Question

有没有办法让输入框跨越其父级的右侧边缘之间的距离，并尽量向左移动？

我的意思是，假设我有

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

我想更改input更改宽度，这样如果没有span s，则input将覆盖整个div，但如果它会从左边收缩吗？我将从javascript添加span。

是否可以在纯CSS中执行此操作？

Answer 1

是的，技术上。

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

但是，支持是not great。

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

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

在Chrome中试用此demo。

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