Question

我正在尝试创建一个可编辑的选择菜单，我这样做是通过将文本字段定位到选择菜单上，我已经测试了它并且它可以工作，但是我在将文本字段定位在顶部时遇到问题在<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 here

Answer 1

您需要使用绝对定位来实现此目的，请参阅this updated 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属性进一步定位。在那个小提琴中，looks absolutely perfect使用

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

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

How can I create an editable dropdownlist in HTML?

在显示内联中将元素放在彼此的顶部？

1 个答案: