大佬教程收集整理的这篇文章主要介绍了没有 <ul> 的导航栏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我对 HTML/CSS/Js 很陌生，如果这是一个新手问题，请提前道歉。 每次我看到导航栏，人们都倾向于使用 ul/li。但是，我认为您可以通过使用和格式化 'a' 标签从而减少 HTML 代码来获得完全相同的结果，如下例所示：
HTML：
<body>
<header>
<nav class="Top-Nav">
<a href="#about">About me</a>
<a href="#education">Education</a>
<a href="#work">Work</a>
<a href="#interests">Interests & HobbIEs</a>
<a href="#contact">Contact</a>
</nav>
</header>
</body>
@H_502_6@CSS：
body {
margin: 0px;
padding: 0px;
Font-family: Verdana,Geneva,Tahoma,sans-serif;
}
/* header section.*/
header {
text-align: center;
color: white;
}
/* Navigation */
.Top-Nav {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
BACkground-color: black;
padding: 20px 0;
wIDth: 100%;
}
.Top-Nav a {
text-decoration: underline;
color: white;
}
.Top-Nav a:hover {
Font-style: italic;
}
@H_502_6@在语义等方面这样做有什么问题吗？如果是这样，使用 ul/li 标签的原因和优势是什么？
这是fiddle。
谢谢！
我知道您的问题是关于语义的。
导航元素 <nav> 的内容形式没有明确的精确性（无论是使用 <li> <ol> 还是仅使用 <a>）。
如果您看一眼 the nav element，您会看到它与可访问性 navigation role 的关系。 同样，您可以查看 the ul element 以及它与可访问性 list role 的关系。
因此语义差异在于一系列 <a> 与链接到某处的纯文本条目更相关。当封装在 <ul> 中时，它具有 list of links 的含义。后者可能更明确地定义导航菜单的概念。
如果您想在每个项目下方添加一个下拉列表，您将需要使用 ul 标签来实现该结果。您不能简单地通过使用锚标签添加下拉菜单，这就是为什么您会看到大多数人使用 ul 标签，然后在里面使用 li 标签来制作下拉菜单。如果您只想在导航栏上显示项目并且不想有下拉列表，那么这种方法可能没问题..:)
以上是大佬教程为你收集整理的没有 <ul> 的导航栏全部内容，希望文章能够帮你解决没有 <ul> 的导航栏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。