html – 在输入元素的顶部叠加div

概述我有一个包含所有这些元素的div： <div id="container"> <input type="text" /> <div id="click"></div></div> 我想以某种方式设置样式,以便id = click的div将位于input元素的右角. 我应用于文本的CSS是： text-align: left;width: 400px; 在我的点击div我有： width 我有一个包含所有这些元素的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>

总结

以上是内存溢出为你收集整理的html – 在输入元素的顶部叠加div全部内容，希望文章能够帮你解决html – 在输入元素的顶部叠加div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。