在表单中排列输入

Question

我在一个网站上工作，但是在安排输入项时遇到问题。

这就是我想要的样子：

description you cite

但是看起来像这样：

我的HTML代码：

    <div id="search">
      <form action="">
        <input class="search-area" type="text" name="text" placeholder="Search here">
        <input class="search-btn" type="submit" name="submit" value="SEARCH">
      </form>
    </div>

我的CSS代码：

#search{
    width: 650px;
    float: left;
    padding: 20px;
    margin-left: 50px;
}
.search-area{
    width: 650px;
    height: 50px;
    background: #fff;
    border: none;
    border-radius: 10px;
    float: left;
    padding-left: 15px;

}
.search-btn{
    width: 100px;
    height: 50px;
    border-radius: 10px;
    border: none;
    color:#fff;
    background: brown;
    margin-left: -100px;
}

请帮助我理解问题。

Answer 1

添加位置：相对于您的主div（即#search）。 然后在该按钮上添加position：absolute，并在right：0上添加它，以使其与相关元素的右边对齐。

#search{
position:relative;
}

.search-btn{
position:absolute;
right:0
}

也许您还需要按钮的顶部位置。您可以添加例如top：5px来实现。

欢呼

Answer 2

要将搜索按钮放置在另一个元素上方，它必须为position: absolute。

您在这里：

body {
  background: lightgreen;
}

#search {
  position: relative;
  width: 550px;
  padding: 20px;
}
.search-area {
  width: 550px;
  height: 50px;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding-left: 15px;
}
.search-btn {
  position: absolute;
  top: 20px;
  right: 0;
  width: 100px;
  height: 52px;
  border-radius: 10px;
  border: none;
  color: #fff;
  background: brown;
}

<div id="search">
  <form action="">
    <input class="search-area" type="text" name="text" placeholder="Search here">
    <input class="search-btn" type="submit" name="submit" value="SEARCH">
  </form>
</div>