显示内联元素在彼此顶部的位置元素？

我想创建一个可编辑的选择菜单，我通过将文本字段放置到选择菜单上来实现这一点，我测试了它，它的工作原理，但是我在选择顶部的文本字段时遇到问题在<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

来源

2012-11-03 Making it Happen

你能做出的jsfiddle？ –

为您制作了[jsFiddle]（http://jsfiddle.net/RUb38/）。 – MarioDS

您需要使用绝对定位来实现这一点，看到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?

来源

2012-11-03 14:59:12 MarioDS

显示内联元素在彼此顶部的位置元素？

回答

相关问题