如何修复导航栏中的搜索图标位置使用？答案

【问题标题】：How do fix the search icon position use in the navbar?如何修复导航栏中的搜索图标位置使用？
【发布时间】：2020-10-07 16:05:10
【问题描述】：

我正在为我正在开发的网站设计导航栏。我遇到了可以在图片中看到的问题。 1080p 分辨率可在平板电脑或手机屏幕上流畅运行。但是当分辨率开始缩小一点时，导航栏中的搜索组件图标与搜索框不在同一平面上。我该如何解决这个问题？谢谢。注意：我使用 bootstrap 4.5 库进行设计。

/* ... */

/* Navbar Search */

.searchbar {
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: #353b48;
    border-radius: 30px;
    padding: 10px;
}

.search_input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}

.searchbar:hover>.search_input {
    padding: 0 10px;
    width: 12rem;
    caret-color: auto;
    /* changed */
    transition: width 0.4s linear;
}

.searchbar:hover>.search_icon {
    background: white;
    color: black;
    /* #e74c3c */
}

.search_icon {
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}

/* ... */

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- ... -->
</head>
<body>
    
    <!-- ... -->
    <nav>
        <!-- ... -->
        <li class="nav-item">
            <div class="container h-100">
                <div class="d-flex justify-content-center h-100">
                    <div class="searchbar">
                        <input class="search_input" type="text" name="" placeholder="Search...">
                        <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
                    </div>
                </div>
            </div>
        </li>
        <!-- ... -->
    </nav>
    <!-- ... -->
    
</body>
</html>

【问题讨论】：

您需要向我们展示您的完整 HTML 结构。你展示的不是一个有效的，我们需要知道完整的版本。我可以猜到，那时我无法重现您的问题：jsfiddle.net/davidliang2008/19rfsoya/10

标签： html css search bootstrap-4 search-box

【解决方案1】：

只需将display: flex 添加到您的班级.searchbar。或者最好的方法是在搜索图标上使用position: absolute。

【讨论】：

我在它修复的搜索栏上添加了 display flex。谢谢..