搜索栏和搜索按钮的高度不同

Question

我正在制作一个搜索栏来坐在网站上。这是谷歌搜索栏的代码;

.search {
display: inline-block;
height: auto;
width: 100%;
position: sticky;
top: 10vh;
padding-bottom: 2.5vh;
}
input[type=text], select {
width: 50vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
border-radius: 2vh;
box-sizing: border-box;
vertical-align: bottom;
}
.button {
min-width: 5vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
border-radius: 2vh;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>
<br>

无论窗口如何调整大小或缩放，搜索栏和搜索按钮最终都应始终保持相同的高度。它们都与底部对齐，因此具有相同的起点。我只是不知道如何让它们达到相同的高度。

任何帮助将不胜感激。

提前致谢:)

Answer 1

方法 1 (插入font-size:16pxforinput[type=text](按钮的字体大小相同(，如下所示：

input[type=text], select {
font-size: 16px;
//Other codes...
}

.search {
display: inline-block;
height: auto;
width: 100%;
position: sticky;
top: 10vh;
padding-bottom: 2.5vh;
}
input[type=text], select {
width: 50vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
font-size: 16px;
box-sizing: border-box;
vertical-align: bottom;
}
.button {
min-width: 5vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>

方法2(使用line-height：

input[type=text], select {
line-height: 16px;
//Other codes...
}
.button {
line-height: 8px;
//Other codes...
}

.search {
display: inline-block;
height: auto;
width: 100%;
position: sticky;
top: 10vh;
padding-bottom: 2.5vh;
}
input[type=text], select {
width: 50vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
box-sizing: border-box;
vertical-align: bottom;
line-height: 16px;
}
.button {
min-width: 5vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
cursor: pointer;
vertical-align: bottom;
font-size: 16px;
line-height: 8px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>
<br>

Answer 2

尝试display: flex你的.searchform元素。这是因为子项继承了默认属性：在一行中显示、不换行到多行以及拉伸以适合。你可以在这里阅读弹性框(我知道我知道！

也许，它比您希望的要优雅一些，因为您必须给搜索栏一点边距才能获得间距。

.searchform {
display: flex;
}
.search {
display: inline-block;
height: auto;
width: 100%;
position: sticky;
top: 10vh;
padding-bottom: 2.5vh;
}
input[type=text], select {
width: 50vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
border-radius: 2vh;
box-sizing: border-box;
vertical-align: bottom;
margin-right: 5px;
}
.button {
min-width: 5vw;
padding: 2vh 4vh;
margin: 1vh 0.5;
display: inline-block;
border: solid 0.5vh #000000;
border-radius: 2vh;
box-sizing: border-box;
color: #000000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search">
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_self">
<input type="text" autocomplete="on" class="form-control search" name="q" placeholder="Search Google." type="text" autofocus>
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: none;"></i></button>
</form>
</div>
<br>