如何实现navbar导航栏内所有元素的垂直对齐

解决方案 #

你可以切换回flex布局实现精准对齐，flex完全可以自定义控制元素间距，不会出现你之前遇到的间距过大问题，修改点如下：

1. 给导航栏容器设置固定高度，开启flex布局并设置垂直居中，左右元素分别放在两个子容器里控制间距
2. 移除所有float属性，flex布局下不需要浮动实现左右排列
3. 统一所有子元素的高度、行高参数，避免相对单位vh在不同视口下出现高度错位

修改后的完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Homepage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    <style>
        html, body {
            margin: 0;
        }

        .topnav {
            height: 56px; /* 固定导航栏高度作为对齐基准 */
            padding: 0 16px;
            background-color: #252525;
            color: rgb(236, 236, 236);
            display: flex;
            align-items: center; /* 所有子元素垂直居中 */
            justify-content: space-between; /* 左右容器贴两边排列 */
        }

        /* 左侧导航链接容器 */
        .nav-left {
            display: flex;
            align-items: center;
            gap: 0; /* 自定义左侧链接间距，按需调整数值即可 */
        }

        .nav-left a {
            display: block;
            color: rgb(236, 236, 236);
            padding: 0 16px;
            line-height: 56px; /* 行高和导航栏高度一致，文字垂直居中 */
            text-decoration: none;
            font-size: 17px;
        }

        .nav-left a.active {
            background-color: rgb(243, 33, 33);
            color: white;
        }

        /* 右侧操作区容器 */
        .nav-right {
            display: flex;
            align-items: center;
            gap: 12px; /* 自定义右侧元素间距，按需调整数值即可 */
        }

        .search {
            height: 38px; /* 固定搜索框高度 */
            padding: 0 12px;
            width: 220px; /* 固定宽度，也可保留20vw适配 */
        }

        input[type="text"] {
            -moz-appearance: none;
            -webkit-appearance: none;
            border: 0px none transparent;
            border-radius: 10px;
            line-height: 38px;
            background: #181818;
            color: rgb(255, 255, 255);
        }

        input[type="text"].dark {
            background: rgb(27, 27, 27);
            color: #fff;
        }

        input[type="text"].light {
            background: #fff;
            color: #222;
        }

        input[type="text"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            height: 1.4em;
            width: 1.4em;
            border-radius: 50em;
            background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 70% 70%;
            background-size: contain;
            opacity: 0;
            pointer-events: none;
            cursor: pointer;
            margin-right: min(5%, 20px);
        }

        input[type="text"]:focus::-webkit-search-cancel-button {
            opacity: .3;
            pointer-events: all;
        }

        input[type="text"].dark::-webkit-search-cancel-button {
            filter: invert(1);
        }

        ::placeholder {
            color: rgb(194, 194, 194);
            opacity: 1;
        }

        :-ms-input-placeholder {
            color: rgb(194, 194, 194);
        }

        ::-ms-input-placeholder {
            color: rgb(194, 194, 194);
        }

        .create {
            color: white;
            cursor: pointer;
            border: 1px solid #f6f6f6;
            background-color: #343434;
            border-radius: 10px;
            font-size: 24px;
            height: 38px;
            width: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1f282c;
        }

        .usericon {
            font-size: 32px;
            font-weight: 100;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="topnav">
        <!-- 左侧导航 -->
        <div class="nav-left">
            <a class="active" href="#">Home</a>
        </div>
        <!-- 右侧操作区 -->
        <div class="nav-right">
            <input type="text" placeholder="Search.." class="search dark">
            <a href="#create"><i class='fas fa-plus create' id="create"></i></a>
            <a href="#profile"><i class='fas fa-user-circle usericon' id="profile"></i></a>
        </div>
    </div>
</body>
</html>

核心调整说明

• 用flex的gap属性自定义元素间距，完全可以避免你之前遇到的间距过大问题，比float布局更易维护
• 导航栏固定高度作为对齐基准，所有子元素通过align-items: center强制垂直居中
• 把相对单位vh改为固定px值，避免不同设备视口高度变化导致元素高度错位
• 所有元素的排列顺序直接调整HTML里的节点顺序即可，不需要用float的倒序排列逻辑

内容的提问来源于stack exchange，提问作者divinelemon