无法让我的搜索图标位于搜索文本区域旁边

Question

我确信这很简单，但我已经筋疲力尽了。我尝试了很多不同的变体，但我无法将搜索按钮与搜索栏放在同一行。我无计可施。为什么他们在两条不同的线上？？？

.container-inner {
width: 100%;
position: relative;
display: flex;
}

#search-bar {
width: 90%;
border: 2px solid #fff200;
border-right: none;
padding: 5px;
height: 40px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}

#search-bar:focus{
color: black;
}

.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover{
background: darkslategrey
}

.container {
width: 50%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}

<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search"  aria-hidden="true"></i>
</div>
</div>
</form>
</div>

Answer 1

您应该更改添加一个显示为flex的包装，将#search-bar的属性flex设置为1，并删除#search-bar的高度，如下例所示。

.container-inner {
width: 100%;
position: relative;
display: flex;
}
#search-bar {
border: 2px solid #fff200;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
flex: 1;
}
#search-bar:focus {
color: black;
}
.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover {
background: darkslategrey
}
.container {
width: 50%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.input-wrapper {
display: flex;
}

<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg input-wrapper">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>

Answer 2

给.input-groupdisplay: flex;

.container-inner {
width: 100%;
position: relative;
display: flex;
}

#search-bar {
width: 90%;
border: 2px solid #fff200;
border-right: none;
padding: 5px;
height: 40px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}

#search-bar:focus{
color: black;
}

.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover{
background: darkslategrey
}
.input-group{
display: flex;
}

<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search"  aria-hidden="true"></i>
</div>
</div>
</form>
</div>

Answer 3

您在width: 90%;的searchBar上的宽度占用了太多空间。90%的父项+它自己的填充物所留下的小于按钮旁边所需的40px;。去除searchBar的宽度或使其小于70%等

.container-inner {
width: 100%;
position: relative;
display: flex;
}

#search-bar {
border: 2px solid #fff200;
border-right: none;
padding: 5px;
height: 40px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}

#search-bar:focus{
color: black;
}

.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover{
background: darkslategrey
}

.container {
width: 50%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}

<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search"  aria-hidden="true"></i>
</div>
</div>
</form>
</div>

Answer 4

尝试更改内部容器的显示属性