Question

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

在此处找到此解决方案：Link

问题在于，当我为select设置无宽度时，它会呈现最宽的选项。这正是我需要的。但我还必须为文本字段设置一些宽度以适应。怎么做得好？

这是我的代码：

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;
}

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

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;
}

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

1 个答案: