如何将按钮和输入对齐在同一行上，并使它们的结果显示在两者下方？

Question

我有一个按钮和一个搜索栏。 该按钮位于搜索栏上方。 当我点击按钮时，它会在搜索栏上方返回我的数据。

当我搜索时，它会将其返回到搜索栏下方，同时仍会显示单击初始按钮的结果 - 因此我同时在页面上有两个结果。

1. 如何并排放置“ Get Data按钮和Search Cities搜索栏？

2. 使结果显示在两个按钮下方。

3. 如何在不清除初始返回数据的情况下防止两个结果同时显示？

分享我的 html 和 css 代码以及我得到的图像：

.user-form {
  width: 100%;
  max-width: 700px;
}

.user-form input {
  width: 100%;
  display: block;
  background-color: #4c2885;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
}

.user-form input::placeholder {
  color: #bbb;
}

.user-form input:focus {
  outline: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button id="catalog" onclick="GetInfo()">Get Data</button>
<div id="data"></div>

<form class="user-form" id="form">
  <input type="search" id="input" placeholder="Search Cities">
</form>

<div id="myData"></div>

https://i.stack.imgur.com/ZCsEA.png

Answer 1

我没有你所有的代码。 你可以试试这个，让我知道。 我把包装器放在你的按钮和表单上以弯曲它。 如果你想让它出现在下面，你应该把它们放在包装纸外面或放在所有按钮或 forms 的下面。 让我知道这对你有用吗？ 如果不让我知道。

 .user-form { width: 100%; max-width: 700px; }.user-form input { width: 100%; display: block; background-color: #4c2885; border: none; border-radius: 10px; color: #fff; padding: 1rem; margin-bottom: 2rem; font-family: inherit; font-size: 1rem; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); }.user-form input::placeholder { color: #bbb; }.user-form input:focus { outline: none; } #catalog { height: 50px; }.wrapper { display: flex; justify-content:left; grid-gap:10px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="wrapper"> <button id="catalog" onclick="GetInfo()">Get Data</button> <form class="user-form" id="form"> <input type="search" id="input" placeholder="Search Cities"> </form> </div> <div id="data">This will appear here </div> <div id="myData">this will appear here </div>