如何在HTML/CSS中让导航栏与顶部标题处于同一行？

我想在网页顶部的导航栏后面添加一个简单的文本标题，让二者处于同一行，但始终无法实现。我已尝试用div标签包裹导航栏和标题，设置导航栏左浮动、标题右浮动，以下是我的CSS和HTML代码：

原CSS代码 #

.navbar div {
    display: block;
    height: 5px;
    background: #fff;
    float: left;
    margin: 7px 0px 7px 0px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;}
.one {width: 40px;}
.two { width: 30px;}
.three { width: 25px;}
.navbar:hover div { width: 40px;}

.header {
    display: flex;
    justify-content: center;
    width: 100%;
    float: right;
    align-items: center;
    color: gold;}

原HTML代码 #

<div>
<nav class="dropdown">
    <ul>
    <li>
    <a href="index.html" target="_blank" class="navbar">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </a>
        <ul>
          <li><a href="#">Experience</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Socials</a></li>
        </ul>
    </li>
    </ul>
</nav>
<h1 class = "header">Sam Jenkins</h1>
</div>

问题分析与解决方案 #

核心问题点 #

1. 外层包裹div无布局规则，默认块级元素无法约束内部元素同行
2. .header设置了width:100%，占满整行导致导航栏被挤到下方
3. 导航栏的ul自带默认margin/padding，造成多余间距干扰布局

修正方案（采用Flex布局，简洁可靠） #

给外层容器添加Flex布局属性，直接实现同行左右对齐，同时重置元素默认样式：

修改后的CSS代码

/* 汉堡菜单样式保留 */
.navbar div {
    display: block;
    height: 5px;
    background: #fff;
    margin: 7px 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.one {width: 40px;}
.two { width: 30px;}
.three { width: 25px;}
.navbar:hover div { width: 40px;}

/* 外层容器：用Flex实现同行布局 */
.top-bar {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 左右两端分布 */
    width: 100%;
}

/* 重置导航栏ul默认样式 */
.dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 标题样式简化 */
.header {
    color: gold;
    margin: 0; /* 去掉h1默认上下边距 */
}

修改后的HTML代码

<div class="top-bar">
    <nav class="dropdown">
        <ul>
            <li>
                <a href="index.html" target="_blank" class="navbar">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                </a>
                <ul>
                    <li><a href="#">Experience</a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Socials</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <h1 class="header">Sam Jenkins</h1>
</div>

效果说明 #

Flex布局的justify-content: space-between会让导航栏和标题分别靠页面左右两侧，且始终保持在同一行；align-items: center保证二者垂直方向居中对齐，同时重置ul和h1的默认边距，避免不必要的布局间隙。

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