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

Question

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

Answer 1

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

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

How do fix the search icon position use in the navbar?

html

css

search

search-box

bootstrap-4