页面右上角菜单按钮布局问题：需实现三线纵向排列

首先修正HTML结构错误：<body>内部不能嵌套<head>标签，需用容器（比如<header>）包裹LOGO和菜单按钮。

再调整CSS实现菜单按钮在右上角、三线纵向排列的效果：

• 给LOGO和菜单的父容器设置display: flex，通过justify-content: space-between实现LOGO左对齐、菜单右对齐，添加padding避免元素贴边；
• 移除.menubtn的float: right——flex容器内float属性不生效；
• 保持.menu的flex-direction: column即可实现三线纵向排列，可选添加align-items: flex-end让线条靠右对齐。

修正后HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" type="text/css" href="NuncScript.css" />
</head>
<body>
  <header class="header-container">
    <a href="#" class="logo">LOGO.</a>
    <div class="menu">
      <div class="menubtn"></div>
      <div class="menubtn"></div>
      <div class="menubtn"></div>
    </div>
  </header>
</body>
</html>

修正后CSS代码 #

.header-container {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  align-items: center;
}

.menu {
  display: flex;
  flex-direction: column;
}

.menubtn {
  height: 5px;
  background-color: black;
  margin: 6px 0;
  width: 35px;
}

修改后菜单按钮会固定在页面右上角，三条线纵向排列，LOGO同时保持在左上角。

内容的提问来源于stack exchange，提问作者Rawana Faisal