动态添加跨度后如何自动调整输入字段？

Question

我想实现与StackOverflow在发布新问题时添加标签相同的功能。

这里使用旁边的输入字段动态添加跨度。

例如：

<div>
    <div id="multiple-span">
       <span>Item 1<span>
       <span>Item 2<span>
       ...
       <span>Item n<span>
    </div>
    <div id="input-auto-fit">
       <input type="text">
    </div>
</div>

如何使用css实现它？

我尝试使用display:table-cell进行内部div，但input字段不能自动适合外部div。

Answer 1

我也会使用table和table-cell，并进行如下调整。

#outer-box {
    display: table;
    width: 100%;
    white-space: nowrap;
}
#multiple-span, #input-auto-fit {
    display: table-cell;
}
#multiple-span span {
    background: gold;
    padding: 4px;
}
#input-auto-fit  {
    width: 100%;
    padding-left: 4px;
}
#input-auto-fit input {
    width: 100%;
    box-sizing: border-box;
}

<div id="outer-box">
    <div id="multiple-span">
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item n</span>
    </div>
    <div id="input-auto-fit">
        <input type="text"/>
    </div>
</div>