html - 可编辑的 html 组合框。如何为输入设置适当的宽度

Question

我正在创建一个能够像在文本字段中一样输入内容的 ComboBox。为此，我使用了 <input type="text">和 <select>与 <option>元素。

在这里找到了这个解决方案:Link

问题是当我没有为 select 设置宽度时它呈现尽可能宽的选项。这正是我所需要的。但我还必须为文本字段设置一些宽度以适应。如何正确执行？

这是我的代码:

JSFiddle

HTML:

<div class="outer">
    <input type="text" class="text-input"/>
    <div class="inner">
        <select class="editable-select">
            <option>One option</option>
            <option>Another</option>
        </select>
    </div>
</div>

CSS:

.outer, .inner {
    position: absolute;
}
.text-input {
    width: 50px;
    height: 17px;
    padding: 0 4px;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 2;
    border: none;
}
.editable-select {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

附言当从组合框中选择时，请不要介意该值未在文本字段中设置。这不是这个问题的目标。

Answer 1

这对我来说效果很好，请试试这个代码。希望它能解决您的问题。

<div class="outer">
    <input type="text" class="text-input"/>
    <div class="inner">
        <select class="editable-select">
            <option>One option</option>
            <option>Another</option>
        </select>
    </div>
</div>

.outer {
    display:table;
}
.inner {
    display:table-cell;
}
.text-input {
    width: 50px;
    height: 17px;
    padding: 2 4px;
    display:table-cell;
    top: 1px;
    left: 1px;
    z-index: 2;
    border: 1px solid #e7e7e7;
}
.editable-select {
    top: 0px;
    left: 0px;
    z-index: 1;
}