[英]How can I align button and input on the same line and get their results to display below both?
我有一個按鈕和一個搜索欄。 該按鈕位於搜索欄上方。 當我點擊按鈕時,它會在搜索欄上方返回我的數據。
當我搜索時,它會將其返回到搜索欄下方,同時仍會顯示單擊初始按鈕的結果 - 因此我同時在頁面上有兩個結果。
如何並排放置“ Get Data
按鈕和Search Cities
搜索欄?
使結果顯示在兩個按鈕下方。
如何在不清除初始返回數據的情況下防止兩個結果同時顯示?
分享我的 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>
我沒有你所有的代碼。 你可以試試這個,讓我知道。 我把包裝器放在你的按鈕和表單上以彎曲它。 如果你想讓它出現在下面,你應該把它們放在包裝紙外面或放在所有按鈕或 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.