无法让我的搜索图标坐在搜索文本区域旁边

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

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