如何将带图标搜索表单移至Home链接左侧并联动导航

要实现搜索表单与导航栏文本关联、随导航一起移动的效果，最合理的方式是调整HTML结构，将搜索表单整合到导航项所在的容器中，而非通过margin-left强行定位。具体修改如下：

修改后的HTML代码 #

<div class="navbar">
    <div class="navbar_logo">
        <a href="index.html"><img src="images/logo_transparent2.png" /></a>
    </div>

    <div class="navbar_text">
        <ul>
            <li>
                <!-- 将搜索表单移至Home链接左侧 -->
                <form class="form-inline">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-none my-2 my-sm-0" type="submit">
                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiklEQVR4nO2ZzWtTURDFf25ixSiIiO22FdutG8FFa2PpX+CytRQLotD/waILrXv3piCIyySk7VYXfrRd+rVx407blaI2FSNXbyAMk7SJM3kv+g4MhMA95x3umzsz90GGDKnEELAArABbwDZQi/EJ2ASKwFVgkBRiEqgAP4D6AWMPKAMTpABngLUOHr5VVIGRpEzMAV8MTDTiMzDbaxO32jzQa+AOMAWMAkdjjMX/7gJv2qxf6pWJ2y0e4AVQ6IDnAvA0KTNziugucA041AVfWHM9ckjeGRwTW+ZEOF7HDbjDybWj5MwwDpCn066RiQYuxnrTrFHBoU7IrQ+vkzVuKDrjlgIVQf68y5zYD4HzpdAqWbYde4I8vAZeKCgdwGkL4gVB/Ap/vBWa8xakK4I0FDtvLAvNBxakW4I0VGdvTAvNDQvSbUF6Fn+MCs2PFqSy6ubxR15ofvcwcgx/HFeq/D/xar23IN1MQbI/syAtCtIwT3jjntC871EQw1DkjXdC87IF6aDSooQm0gtTSpd90oq8rEyDXk2jzMmipcCE0l6Hyc4ai4rOOWuRqhCoGd9JFZTB6iEOGImFqVlox6iln1RG3XAzeQonzCpbX4uTXbeXD4vKToR4AuRwxJIi2uhQL3V4OsnEllEFBpIwU49D0XKszmOxAczH39Ox2Mk60S5K3jszo+SMV5SBw55mhpWLiU7jJ/AYWE/aDPHKpqR0AO3iG/AIOP+b4U8urO6zptILM8Tbjvk4Y2/EIzS0GF+BD/GqJzSAV4ATyvpUmflb5JSWqC5i1fs066WZtcxMAsj9bzuzDhyhDzBwgNOs598fPXbmJn2GnGKm70xoZvrWRHPOuH0szZCB1vgFpd/exdTtQfAAAAAASUVORK5CYII=" alt="">
                    </button>
                </form>
                <a href="index.html">Home</a>
                <a href="about.html">About</a>
                <a href="contact.html">Contact</a>
            </li>
        </ul>
    </div>
</div>

修改后的CSS代码 #

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #99e6e6;
}

.navbar_logo img{
    width: 230px;
    height: 200px;
    cursor: pointer;
}

.navbar_text{
    margin-right: 40px;
    display: flex;
    align-items: center;
}

.navbar_text ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar_text ul li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar_text ul li a{
    font-size: 24px;
}

.navbar_text a:hover {
    color: black;
    transition: 0.5s;
}

/* 调整搜索表单样式，适配导航布局 */
.form-inline {
    display: flex;
    align-items: center;
    margin: 0;
}

.form-control.mr-sm-2{
    margin-right: 8px;
    float: none;
}

修改说明 #

1. 结构调整：删除独立的搜索表单容器，将表单代码移动到navbar_text的<li>内部、Home链接之前，让搜索表单成为导航组的一部分，自然会随导航一起移动。
2. CSS优化：
   • 给navbar_text、ul、li添加display: flex和align-items: center，确保搜索表单与导航文字垂直对齐。
   • 移除搜索框的float: right，改用flex布局控制位置。
   • 添加gap属性替代margin-left，让导航项和搜索框的间距更规整。

内容的提问来源于stack exchange，提问作者Hacızadə Cavidan