如何让网页右上角navbar-right文本与左上角h3元素顶端对齐？

需要将网页右上角的文本上移，使其与左上角导航栏中的h3元素文本保持水平对齐。当前左上角navbar内的h3元素位置完美，而navbar-right类下的div文本虽位于右上角，但与h3元素不在同一水平高度，需调整使其高度一致，同时保留右上角的位置。

用户提供的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link type="text/css" rel="stylesheet" href="cleanstyle.css" />
    <link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
  
<div class="navbar">
    <h3>Example</h3>
</div>
    <div class="navbar-left"></div>
    <div class="navbar-right">
        <div>Home</div>
        <div>About</div>
        <div>Portfolio</div>
        <div>Contact</div>
    </div>
</body>
</html>

CSS代码 #

@import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);

body {
   margin: 0px;
   font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}

.navbar {
    padding: 20px;
    font-size: 16px;
    justify-content: space-between;
}

.navbar-right {
    justify-content: right;
    display: flex;
    padding-right: 25px;
    font-size: 16px;
    text-align: right;
}

h3 {
    padding-left: 20px;
    text-align: left;
}

.navbar-left div {
    text-transform: uppercase;
    font-weight: 600;
}

.navbar-left,
.navbar-right {
    display: flex;
    align-items: center;
}

.navbar-left > *,
.navbar-right > * {
    margin: 10px;
}

li {
    text-align: right;
    padding: 20px;
}

解决方案 #

问题核心是当前导航栏结构拆分不合理，navbar、navbar-left、navbar-right为同级元素，无法通过flex布局统一控制对齐；同时h3默认带有上下外边距，会干扰垂直对齐效果。

修改后的代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link type="text/css" rel="stylesheet" href="cleanstyle.css" />
    <link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
<!-- 将左右导航容器放入主navbar内，形成统一的flex容器 -->
<div class="navbar">
    <h3>Example</h3>
    <div class="navbar-left"></div>
    <div class="navbar-right">
        <div>Home</div>
        <div>About</div>
        <div>Portfolio</div>
        <div>Contact</div>
    </div>
</div>
</body>
</html>

CSS代码

@import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);

body {
   margin: 0px;
   font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}

/* 主navbar设置为flex容器，用space-between分散左右内容，align-items保证垂直居中 */
.navbar {
    padding: 0 20px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px; /* 固定导航栏高度，保证对齐稳定 */
}

.navbar-right {
    display: flex;
    font-size: 16px;
}

/* 移除h3默认上下margin，避免垂直偏移 */
h3 {
    margin: 0;
    padding-left: 0;
}

.navbar-left div {
    text-transform: uppercase;
    font-weight: 600;
}

.navbar-left,
.navbar-right {
    display: flex;
    align-items: center;
}

.navbar-left > *,
.navbar-right > * {
    margin: 0 10px;
}

li {
    text-align: right;
    padding: 20px;
}

修改说明 #

1. 结构调整：将navbar-left和navbar-right移入navbar容器，使整个导航栏成为统一的flex容器，便于布局控制。
2. flex布局配置：给.navbar添加display: flex、justify-content: space-between和align-items: center，同时设置固定高度确保对齐稳定性。
3. 重置h3样式：移除h3默认上下外边距，消除默认样式导致的垂直偏移。
4. 间距优化：调整.navbar-right的padding和子元素margin，保证右侧内容位置正确且间距合理。

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