css 左对齐徽标,右对齐水平导航栏?

46qrfjad  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(170)

我试着做一个右边有一个水平对齐的导航栏菜单的网页,但是由于某种原因,我所做的一切似乎都不起作用。如果有人能指出我做错了什么,那就太好了,提前感谢了。下面是我的代码:
于飞:

<!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">
        <a href="#home">Home</a>
        <a href="#products">Products</a>
        <a href="#login">Login</a>
          <a href="#cart">Cart</a>
          </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:20;
}

a
{
  text-decoration: none;
}

它所显示的只是左边的徽标,下面的文本全部水平排列,并带有下划线:/

ma8fv8wu

ma8fv8wu1#

这个代码实际上工作-我链接了错误的CSS文件.哇哈哈

相关问题