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

Question

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

我的意思是，假设我有

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

我想input改变宽度，这样如果没有spans，input就会延伸到整个s div，但如果有跨度，它会从左边收缩？我会span从 javascript 添加 s 。

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

Answer 1

是的，从技术上讲。

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

但是，支持不是很大。

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

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

在 Chrome 中试试这个演示。

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