Position elements on top of each other within display-inline?

Question

I am trying to create an editable select menu, i am doing this by positioning a text field onto of the select menu, i have tested it and it works, however i am having problems positioning the text field on-top of the select menu within the <span>, the text field goes anywhere but onto of the select.

<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>

The 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

Can you make a jsfiddle? – Joshua Dwire Nov 03 '12 at 14:55 — Joshua Dwire, Nov 03 '12 at 14:55
Made a [jsFiddle](http://jsfiddle.net/RUb38/) for you. – MarioDS Nov 03 '12 at 14:56 — MarioDS, Nov 03 '12 at 14:56

score 0 · Answer 1 · edited May 23 '17 at 10:25

You will need to use absolute positioning to achieve this, see 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;
}

You can position it further by using the left and top properties. In that fiddle, it looks absolutely perfect using

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

But however, the option a user selects is not visible like that. I would not know how to fix that really. An truly editable select would be great and you can find how to do it on this SO question:

How can I create an editable dropdownlist in HTML?

Position elements on top of each other within display-inline?

1 Answers1