有沒有辦法將搜索按鈕放在查詢框中？我一直在尋找解決方案，但這些答案非常令人困惑。我也希望它能夠回應。謝謝！
還有這里的網站：https : //newtabb.gq
這是源代碼：https : //replit.com/@Hyderite/newtabb
HTML代碼：
<div class="search-cotnainer">
<input type="text" placeholder="Enter your search query here..." id="query" />
<button id="search-btn">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
</button>
</div>
CSS：
#query {
width: auto;
min-width: 325px;
height: 35px;
border-radius: 20px;
border: #d4d4d4 1px solid;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
margin-top: 10px;
vertical-align: middle;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#query:active {
border: #b3b3b3 1px solid;
}
#search-btn {
position: relative;
width: 35px;
height: 35px;
border-radius: 100%;
padding-top: 5px;
margin-top: 10px;
z-index: 10;
}
#search-btn:focus {
outline: none;
}
.search-container {
display: inline-block;
}
uj5u.com熱心網友回復：
有很多方法可以這樣做，但您可以使用這個簡單的解決方案查看代碼段。
我將輸入和按鈕包裹在一個div 中
并給 div 一個相對位置
和max-content用于寬度和高度，以便它匹配內容的大小（在這種情況下是輸入）
我給了它一個顯示 flex和align-items center只是垂直居中按鈕。
我洗掉了絕對位置從輸入和更改按鈕位置絕對和設定權到的3px通過測驗，以獲得最佳的位置。
最后，我設定保證金內嵌的自動向我創建居中的div。
我試圖在代碼中說清楚，希望對你有幫助。
#query {
width: auto;
min-width: 325px;
height: 35px;
border-radius: 20px;
border: #d4d4d4 1px solid;
padding-left: 20px;
padding-right: 20px;
display: inline-block;
margin-top: 10px;
vertical-align: middle;
/*position: absolute;*/ /* removed line */
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#query:active {
border: #b3b3b3 1px solid;
}
#search-btn {
position: absolute;/* changed line */
width: 35px;
height: 35px;
border-radius: 100%;
padding-top: 5px;
margin-top: 10px;
z-index: 10;
right:3px;/* New line */
}
#search-btn:focus {
outline: none;
}
.search-container {
display: inline-block;
}
.search-wrapper{
display:flex;/* New line */
align-items:center;/* New line */
width:max-content;/* New line */
height:max-content;/* New line */
position:relative;/* New line */
margin-inline:auto;/* New line */
} <div class="search-cotnainer">
<div class="search-wrapper">
<input type="text" placeholder="Enter your search query here..." id="query" />
<button id="search-btn">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
</button>
</div>
</div>uj5u.com熱心網友回復：
flex 是來營救的。
注意：search-cotnainer 我還更正了 container 的拼寫。
HTML
<div class="search-container">
<div class="search-container-item"> <input type="text" placeholder="Enter your search query here..." id="query">
<button id="search-btn">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
</button>
</div>
</div>
CSS
.search-container{
display: flex;
flex-direction: row;
justify-content: center;
margin: 8px;
}
.search-container-item {
border: 1px solid gray;
border-radius: 100px;
padding: 4px 8px;
display: flex;
align-items: center;
}
#query {
min-width: 325px;
height: 35px;
border-radius: 20px;
border: none;
padding: 4px 8px;
}
#search-btn {
width: 35px;
height: 35px;
border-radius: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401320.html