如何将MyRide标题与导航栏设置在同一行？

我正在学习HTML和CSS，尝试了多种方法仍未解决问题，在此发起求助。当前页面中，Header区域（Logo+MyRide标题）和导航栏默认换行显示，期望二者能在同一行排列（预期效果为标题与导航栏分处一行两端），推测是块级元素默认布局导致换行，但找不到解决方法。

我的HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>MyRide|Home</title>
        <link rel="stylesheet" href="../css/new.css"/>
    </head>
    
    <body>
        <div class="cover-image heading">
            <header>
                <img src="../images/headerLogo.png" alt="logo" width="25%" height="10%">MyRide
            </header>
            <nav>
                <ul id="ul1">
                    <li class="navbar"><a href="./home.html" class="li1">Home</a></li>
                    <li class="navbar"><a href="./fleet.html"class="li1">Fleet</a></li>
                    <li class="navbar"><a href="./services.html"class="li1">Services</a></li>
                    <li class="navbar"><a href="./about.html"class="li1">About</a></li>
                    <li class="navbar"><a href="./contact.html"class="li1">Contact Us</a></li>
                </ul>
            </nav>              
        </div>
    </body>
</html>

我的CSS代码 #

*{
    margin:0;
    padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    color:darkgray;
    flex: 10;
}

.cover-image{
    background-image: url(../images/headercover.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    background-color: black;
    
    padding-top: 1%;
    padding-bottom: 1%;
}

.heading{
    color: red;
    font-size: 90px;
}

a.li1{
    text-decoration: none;
    color: gold;
}

header,nav{
    margin: 0;
}

.navbar{
    padding-right: 5px;
    display: inline;
    font-size: 28px;
    margin:0;
}
#ul1{
    list-style: none;
    display: inline-block;
    list-style-type: none;
    align-content: end;
    margin-top: 0;
    padding: 0;
}

解决方案：使用Flex布局实现横向排列 #

核心问题是header和nav都是块级元素，默认会独占一行。通过给它们的父容器.cover-image添加Flex布局，就能轻松实现横向排列，同时还能灵活控制对齐方式：

修改后的CSS代码 #

*{
    margin:0;
    padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    color:darkgray;
}

.cover-image{
    background-image: url(../images/headercover.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    background-color: black;
    
    padding-top: 1%;
    padding-bottom: 1%;
    /* 开启Flex布局，让子元素横向排列 */
    display: flex;
    /* 标题居左、导航栏居右，中间自动填充空白 */
    justify-content: space-between;
    /* 垂直方向居中对齐，避免上下错位 */
    align-items: center;
}

.heading{
    color: red;
    font-size: 90px;
}

a.li1{
    text-decoration: none;
    color: gold;
}

header,nav{
    margin: 0;
}

.navbar{
    padding-right: 15px; /* 增加导航项间距，提升美观度 */
    display: inline;
    font-size: 28px;
    margin:0;
}
#ul1{
    list-style: none;
    list-style-type: none;
    margin-top: 0;
    padding: 0;
}

原理说明 #

1. display: flex将父容器变为Flex容器，子元素（header、nav）会自动变为Flex项目，默认横向排列；
2. justify-content: space-between让两个子元素分别靠向容器的左右两端，中间空白区域自动填充；
3. align-items: center保证header和nav在垂直方向上居中对齐，避免因内容高度不同导致错位。

如果不想使用Flex布局，也可以给header和nav添加display: inline-block属性，但Flex布局是现代前端布局的首选方案，兼容性更好且更易维护复杂布局。

内容的提问来源于stack exchange，提问作者Tharindu D Munasinghe