时间戳

首页 > 解决方案 > 无法让我的搜索图标位于搜索文本区域旁边

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

问题描述

我敢肯定这很简单，但我已经筋疲力尽地试图弄清楚了。我尝试了很多不同的变体，只是无法让搜索按钮与搜索栏位于同一行。我无计可施。为什么他们在两条不同的线路上？？？

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

标签： htmlcssbuttonsearch

解决方案

您应该更改添加一个带有 display 的包装器flex，将属性 flex 设置#search-bar为并从以下示例中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>

推荐阅读