将按钮置于输入左侧

Question

我想制作id为#searchBtn的按钮，以输入id为#searchInput的表单。HTML:

header {
position: relative;
z-index: 2;
}
.searchInputMain {
width: 300px;
height: 40px;
}
.searchButton {
width: 200px;
height: 40px;
margin-top: 5px;
}
#searchForm {
position: static;
float: right;
margin-top: 20px;
margin-right: 500px;
}
#searchBtn {
position: static;
float: right;
margin-right: 150px;
}

<header>
<div id="searchForm">
<form>
<input class="searchInputMain">
<button class="searchButton" id="searchBtn" type="submit">
Search
</button>
</form>
</div>
</header>

如何制作？哪些款式需要它？哪些样式是无用的？

Answer 1

• 只需切换html中的位置
• 删除了不必要的css

header {
position: relative;
z-index: 2;
}
.searchInputMain {
width: 300px;
height: 40px;
}
.searchButton {
width: 200px;
height: 45px;
}
#searchForm {
margin-top: 20px;
}
#searchForm form {
display: flex;
}

<header>
<div id="searchForm">
<form>
<button class="searchButton" id="searchBtn" type="submit">
Search
</button>
<input class="searchInputMain">
</form>
</div>
</header>

Answer 2

header {
position: relative;
z-index: 2;
}
.searchInputMain {
width: 300px;
height: 40px;
box-sizing: border-box;
}
.searchButton {
width: 200px;
height: 40px;
}
form{
display: inline-flex;
flex-direction: row-reverse;
}

<header>
<div id="searchForm">
<form>
<input class="searchInputMain">
<button class="searchButton" id="searchBtn" type="submit">
Search
</button>
</form>
</div>
</header>

更好的方法是简单地更改HTML，将按钮放在表单元素之前。但如果你不能做到这一点，用下面的替换你的CSS

header {
position: relative;
z-index: 2;
}
.searchInputMain {
width: 300px;
height: 40px;
box-sizing: border-box;
}
.searchButton {
width: 200px;
height: 40px;
}
form{
display: inline-flex;
flex-direction: row-reverse;
}