亚马逊网站克隆项目中导航栏Flex布局失效的问题求助

兄弟别着急，我帮你排查下代码里的问题！你遇到的导航栏flex不生效，主要是几个细节没处理到位，咱们一步步来修正：

问题点梳理 #

• HTML结构错误：你的nav-address元素放在了navbar容器外面！flex布局只对容器的直接子元素生效，所以这个地址模块根本没被flex管理，自然不会横向排列。
• CSS语法错误：
  • 宽度值缺少单位：width: 113;要改成width: 113px;，浏览器无法识别无单位的数值
  • 背景属性写错：background-repeat: cover;应该是background-size: cover;，cover是控制背景尺寸的属性，不是重复方式
  • 类名与伪类错误：.boder.hover应该是.border:hover，你类名少写了一个r（应该是border不是boder），而且hover伪类要用冒号:连接，不是点.
• 样式引用问题：你把外部样式表的引用注释掉了，如果你的CSS是写在style.css里，要去掉注释让样式生效；如果是内嵌样式，要把CSS代码放到<style>标签里。

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="navbar">
            <!-- 导航logo -->
            <div class="nav-logo border">
                <div class="logo"></div>
            </div>
            <!-- 地址模块，放到navbar里面！ -->
            <div class="nav-address border">
                <p>Deliver To</p>
                <div class="add-icon">
                    <i class="fa-solid fa-location-dot"></i>
                    <span>India</span>
                </div>
            </div>
        </div>
    </header>
</body>
</html>

CSS部分（style.css内容）

* {
    margin: 0;
    font-family: Arial;
    box-sizing: border-box; /* 修正为正确的盒模型属性 */
}

.navbar {
    height: 60px;
    background-color: black;
    color: white;
    display: flex;
    align-items: center; /* 加上这个让子元素垂直居中，更贴合亚马逊导航栏效果 */
    gap: 10px; /* 子元素之间加间距，优化视觉 */
    padding: 0 10px; /* 左右加内边距，避免内容贴边 */
}

.nav-logo {
    height: 50px;
    width: 113px; /* 加上px单位 */
}

.logo {
    height: 50px;
    width: 113px; /* 加上px单位 */
    background-image: url("img/amazon_logo.png"); /* 对应你创建的img文件夹路径 */
    background-size: cover; /* 修正属性 */
    background-repeat: no-repeat; /* 确保logo不重复 */
}

.border {
    border: 2px solid transparent;
    padding: 8px; /* 加内边距，hover时边框不会挤压内容 */
    border-radius: 3px; /* 可选：加圆角更贴近亚马逊风格 */
}

.border:hover {
    border: 2px solid white;
}

.nav-address {
    display: flex;
    flex-direction: column;
}

.add-icon {
    display: flex;
    align-items: center;
    gap: 4px;
}

这样修改后，你的导航栏flex布局应该就能正常工作了，logo和地址模块会横向排列，hover效果也能正常触发～

备注：内容来源于stack exchange，提问作者osama aslam