我有一个包含所有这些元素的div：
<div id="container"> <input type="text" /> <div id="click"></div> </div>
我想以某种方式设置样式,以便id = click的div将位于input元素的右角.
我应用于文本的CSS是：
text-align: left; width: 400px;
在我的点击div我有：
width: 30px; height: 30px;
基本上它看起来像这样：
[____INPUT___________________{DIV}]
我不知道如何设置div的样式以便将它放在input元素上.现在它直接躺在它的右边.
解决方法
* {
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>
