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

2024-05-18 • 问答

我确定这很简单，但是我已经筋疲力尽了。我尝试了许多不同的变体，但只是无法使搜索按钮与搜索栏位于同一行。我机智。为什么它们在两条不同的线上？

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

您应更改添加显示为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>

给予.input-group display: 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>

您在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>

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

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

chenxiangxie0 回答：无法让我的搜索图标坐在搜索文字区域旁边

大家都在问