0

我正在尝试创建一个可编辑的选择菜单，我通过将文本字段定位到选择菜单上来做到这一点，我已经对其进行了测试并且它可以工作，但是我在将文本字段定位在选择菜单顶部时遇到问题，<span>文本字段去任何地方，但到选择。

<div class="SwitchCol"><span>Editable Select:</span><span><select onchange="$('input#text4').val($(this).val());"> <option>option1</option><option>option2</option><option>option3</option><option>option4</option><option>option5</option></select><input id="text4"/></span></div>

Css

.SwitchCol{
padding:2px 2px 2px 2px;
height:20px;
max-width:100%;
}

.SwitchCol span{
width:140px;
display: inline-block;
}

input{

margin-left: -170px;
width: 140px;
height: 1.2em;

}

select{
width: 175px;
}

jsFiddle在这里

4

1 回答 1

0

您将需要使用绝对定位来实现这一点，请参阅此更新的 jsFiddle

CSS：

.SwitchCol {
    padding:2px 2px 2px 2px;
    height:20px; max-width:100%; }  

.SwitchCol span {
    width:140px;
    display: inline;
}  

input {  
    margin-left: -170px;
    width: 140px; height: 1.2em;
    position: absolute;

}  

select {
    width: 175px;
}

您可以使用left和top属性进一步定位它。在那个小提琴中，使用它看起来绝对完美

input {  
    margin-left: -170px;
    width: 155px; height: 1.4em;
    position: absolute;
    left: 276px;
    top: 2px;
}

但是，用户选择的选项是不可见的。我不知道如何真正解决这个问题。一个真正可编辑的选择会很棒，您可以在这个 SO 问题上找到如何做到这一点：

如何在 HTML 中创建可编辑的下拉列表？

于 2012-11-03T14:59:12.030 回答