<nav>标签和<div>标签之间的区别？

Question

我已经使用

标签创建了一个导航菜单栏，但是它仅以垂直方式显示。但是，我随后将

标记更改为

标记，但是在垂直方向上仍然收到相同的结果。

1 个答案:

答案 0 :(得分：0)

在ul上添加display: flex;

nav {
  padding: 0;
  width: 100%;
  background: #262626;
  overflow: hidden;

}
li a {
  color: white !important;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: gray;
}
li {
  list-style: none;
}
ul {
  display: flex;
}

<nav>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="#">FAQ</a></li>
  </ul>
</nav>

相关问题

• $（“<tag> </tag>”）和$（'<tag>'）之间有什么区别？</tag>
• 连接id和html标签之间的区别，即ul＃nav vs #nav ul
• div和span标签之间的区别
• $（'<div>'）和$（'<div>'）</div> </div>之间的差异
• span标记和div标记之间的区别
• 在Bootstrap 3导航栏中使用NAV和DIV有什么区别？
• <nav>和<div>有什么区别？
• 标题标记和普通div之间的区别是什么？
• $（“<div>”）和$（“div”）之间的差异
• <nav>标签和<div>标签之间的区别？

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

在ul上添加display: flex;

nav {
  padding: 0;
  width: 100%;
  background: #262626;
  overflow: hidden;

}
li a {
  color: white !important;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: gray;
}
li {
  list-style: none;
}
ul {
  display: flex;
}

<nav>
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="#">FAQ</a></li>
  </ul>
</nav>