наложите ДИВ на верхней части входного элемента

Question

У меня есть DIV, который содержит все эти элементы:

<div id="container"> 
    <input type="text" /> 
    <div id="click"></div> 
</div> 

Я хочу, чтобы стиль это таким образом, так что div с id=click будет находиться в правом углу входной элемент.

CSS-я применил к тексту является:

text-align: left; 
width: 400px; 

В моих click DIV У меня есть:

width: 30px; 
height: 30px; 

По сути, это будет выглядеть следующим образом:

[____INPUT___________________{DIV}] 

Я не конечно, как стилизовать div, чтобы расположить его над элементом ввода. Сейчас он лежит прямо справа от него.

Answer 1

* { 
 
    box-sizing: border-box; /* gives padding and border from inside */ 
 
} 
 
#container { 
 
    position: relative; /* for absolute child element */ 
 
    display: inline-block; /* to take the width of the input */ 
 
} 
 
input { 
 
    text-align: left; 
 
    width: 400px; 
 
    height: 30px; /* added to match the height of the #click div */ 
 
    outline: 0; /* to remove outline when focused */ 
 
} 
 
#click { 
 
    width: 30px; 
 
    height: 30px; 
 
    position: absolute; /* to align it to right and positon it over the input */ 
 
    top: 0; 
 
    right: 0; 
 
    background: lightgrey; 
 
}

<div id="container"> 
 
    <input type="text" /> 
 
    <div id="click"></div> 
 
</div>

Answer 2

Попробуйте рисунок ниже.

<div id="container"> 
    <input type="text" style="float: left;" /> 
    <div id="click" style="float: left; position: relative; left: -30px;"></div> 
</div> 

Если погружение проходит под текстовым полем, попробуйте применить z-index.

Answer 3

Вы можете использовать float:right для click div.

Answer 4

Вы можете добавить CSS при нажатии на DIV

float : right; 
margin-left : (as many pixel you want)px;   

Answer 5

вы должны попробовать

display:inline 

свойство на DIV#click элемента. как я сделал в этом fiddle

Answer 6

Вы можете использовать position:absolute для div#click, чтобы контролировать его, но убедитесь, что #container имеет position:relative

JS Fiddle

#container{ 
 
    margin:0 auto; 
 
    width:300px; 
 
    position:relative; 
 
    outline:2px solid #060; 
 
} 
 
#container #click{ 
 
    width:40px; 
 
    line-height:36px; 
 
    background-color:#090; 
 
    color:white; 
 
    text-align:center; 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
} 
 
#container input[type="text"]{ 
 
    width:298px; 
 
    height:30px; 
 
    padding:right:40px; 
 
}

<br> 
 
<div id="container"> 
 
    <input type="text" /> 
 
    <div id="click">GO</div> 
 
</div>