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的样式以便将它放在input元素上。现在它直接躺在它的右边。

Answer 1

您可以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>

Answer 2

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 3

尝试以下样式。

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

如果您的潜水位于文本框下方，请尝试应用z-index。

Answer 4

您可以使用float:right到click div。

Answer 5

单击div

时可以添加CSS

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

Answer 6

你应该试试

 display:inline

DIV#click元素上的

属性。就像我在fiddle

中所做的那样

在输入元素的顶部叠加div

6 个答案: