文本框/下拉组合

Question

我正在尝试"合并"文本框和下拉框.我似乎无法让他们排队.

我的代码:

<input name="" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;" />
<select name="" style="z-index: 1; width: 695px; padding:0px; position:absolute;">
    <option value="Value for Item 1" title="Title for Item 1">Item 1</option>
    <option value="Value for Item 2" title="Title for Item 2">Item 2</option>
    <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>

Answer 1

我在这里为您创建了一个演示：http : //jsfiddle.net/aJaa6/

*请注意，我更改了宽度以使其适合面板。

CSS：

#container
{
    position: relative;
}

#input
{
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0;
margin: 0;
}

#select
{
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}

标记：

<div id="container">
<input id="input" name="" type="" style="width: 100px;">
<br>
<select id="select" name="" style="width: 115px;">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>