顯示內聯元素在彼此頂部的位置元素？

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?