Question

我正在将搜索栏放置在网站上。这是Google搜索栏的代码；

.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

在您的display: flex元素上尝试.searchform。之所以可行，是因为子级继承了默认属性：连续显示，不换行并进行拉伸以适合显示。 You can read up on flexbox here（我知道！）。

它可能比您希望的要优雅一些，因为您必须在搜索栏上增加一些边距以获取间距。

.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>

Answer 2

方法1） 将font-size:16px插入input[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>

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

2 个答案: