左侧Logo+右侧水平导航栏布局问题求助

DevOps 小满

2026-8-12

问题排查与修复方案

你的代码存在几个关键问题，导致导航栏无法正确对齐：

1. HTML结构与CSS选择器不匹配

CSS中针对topnav ul和topnav ul li设置了样式，但HTML的topnav标签下直接是<a>标签，没有<ul>和<li>结构，导致这些样式完全不生效。

2. CSS属性缺失单位

margin-right:20未添加单位（如px），浏览器无法识别该属性。

3. 导航链接默认样式未完全覆盖

部分浏览器可能仍保留链接的下划线样式，需要明确覆盖。

修复后的完整代码

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArtStore</title>
    <link rel = "stylesheet" href="styles.css">
</head>
<body>
    <div class="navbar">
        <div class="logo">
            <img src="logo.png" width="125px">
        </div>
        <nav class="topnav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#login">Login</a></li>
                <li><a href="#cart">Cart</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

CSS代码：

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.navbar{
  display:flex;
  align-items:center;
  padding:20px;
}

.topnav{
  flex:1;
  text-align: right;
}

.topnav ul{
  display: inline-block;
  list-style-type: none;
}

.topnav ul li{
  display: inline-block;
  margin-right:20px; /* 添加px单位 */
}

a{
  text-decoration: none;
  color: #333; /* 可选：设置链接颜色，避免默认蓝色 */
}