新手求助：如何将NETFLIX标题、语言选择器与登录按钮排成一行

我是前端新手，尝试将NETFLIX标题、语言选择下拉框和Sign in按钮放在同一行，但始终无法实现。已尝试使用display:flex搭配justify-content: space-between、align-items:center属性，也调整过width、height，设置过display:inline、inline-block，均未解决问题。

现有代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clone@Netflix</title>
    <link rel="stylesheet" href="netflix.css">
</head>

<body>
    <header>
        <nav class="navigation">
            <h2>NETFLIX</h2>
            <span class="language">
                <select name="#" id="lang_inner">
                    <option value="en">English</option>
                    <option value="hi">Hindi</option>
                    <option value="ar">Arabic</option>
                    <option value="es">Espaniol</option>
                </select>
            </span>
            <button class="signin_button">Sign in</button>
        </nav>
    </header>
</body>

</html>

CSS代码 #

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: sans-serif;
}
header{
    position:absolute;
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:100vh;
    width: 100%;
}

解决方案 #

问题核心：你把flex布局加在了header上，但header的直接子元素只有nav一个，flex布局无法作用到nav内部的标题、下拉框和按钮上。需要把flex属性应用到包含这三个元素的.navigation容器上。

修改后的CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
header {
    position: absolute;
    width: 100%;
    padding: 1rem 2rem; /* 给导航栏添加内边距，避免内容贴边 */
}
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
/* 可选：优化样式接近Netflix风格 */
.navigation h2 {
    color: #e50914;
    font-size: 2rem;
}
.language select {
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.7);
    color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.signin_button {
    padding: 0.5rem 1rem;
    background: #e50914;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 1rem; /* 拉开按钮与下拉框的间距 */
}

关键调整点 #

• 将display:flex、justify-content: space-between、align-items:center从header移至.navigation，让nav内部的三个元素横向排列，两端对齐且垂直居中。
• 移除header的height:100vh，避免导航栏占满整个视口，改用内边距控制导航栏的上下空间。
• 可选添加样式优化，让元素更贴近Netflix的视觉效果。

内容的提问来源于stack exchange，提问作者Mohd. Tabish Khan