Fatal编程技术网
  • html/
  • Html 如何在CSS中将菜单更改为堆栈？

Html 如何在CSS中将菜单更改为堆栈？

html css drop-down-menu menu

Html 如何在CSS中将菜单更改为堆栈？,html,css,drop-down-menu,menu,Html,Css,Drop Down Menu,Menu,我正在尝试为一个网站制作一个响应菜单。我希望我的菜单项彼此堆叠，类似于移动站点上的大多数下拉菜单。我不确定是什么让我的内容对齐变形还是对齐。我想去掉额外的空间，使每个项目在其他项目上对齐。 目前，它看起来是这样的： 我的目标是： 代码 HTML <body> <header> <div class="container"> <div id="homepage"> <h1>

我正在尝试为一个网站制作一个响应菜单。我希望我的菜单项彼此堆叠，类似于移动站点上的大多数下拉菜单。我不确定是什么让我的内容对齐变形还是对齐。我想去掉额外的空间，使每个项目在其他项目上对齐。 目前，它看起来是这样的：

我的目标是：

代码

HTML

   <body>
   <header>
<div class="container">
<div id="homepage">
   <h1> Tim David</h1>
</div>
<div id="menu">
  <nav>
  <ul>
    <li><a href="#about">About </a></li> <!--have links go to part of the page-->
    <li><a href="#my-works">Gallery</a></li>
    <li><a href="#container">Contact</a></li>
  </ul>
</nav>
</div>
<section id="featured">
  <h2>Nature Lover & Adventure Seeker </h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
}

您将flex属性放在
nav
元素上，而不是子元素
ul
元素上。只需将此添加到现有CSS中：

nav ul {
  background: white;
  display: flex;
  flex-direction: column;
}
如果需要，您可以从父
nav
元素中删除flex元素。

检查此编辑版本：我使用了
display:flex
。您几乎不应该使用
float:left
nav ul {
  background: white;
  display: flex;
  flex-direction: column;
}