javascript - 动态添加跨度后如何自动适应输入字段？

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实现？

我尝试对两个内部 div 使用 display:table-cell 但 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>