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

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

方法一)为 input[type=text] 插入 font-size:16px(按钮的字体大小相同)，如下所示:

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>