响应式菜单仅使用 "nav" 和 "a" 标签（无 "ul"）

Question

我正在阅读 HTML5 标签的语义，我突然意识到 CSS 菜单的全部是使用无序列表（ ul 标签）完成的。这背后是否有特殊原因，或者是否可以仅使用 nav 和 a 标签来创建响应式菜单？

最先进的技术：

<nav class="nav_menu">
<ul>
    <li class="nav-item"><a href="#"> Item 1 </a></li>
    <li class="nav-item"><a href="#"> Item 2 </a></li>
    <li class="nav-item"><a href="#"> Item 3 </a></li>
</ul>
</nav>

CSS:

.nav_menu {
  position:relative;
  display:inline-block;
  width:100%;
}
.nav-item {
  width:100%;
  float:none;
}
.nav-item a {
  display:block;
}
@media all and (min-width: 500px) {
  .nav-item {
    float:left;
    width:auto;
  }
  .nav-item a {
    padding:15px 20px;
  }
}

我想达到的效果：

<nav class="nav_menu">
    <a href="#"> Item 1 </a>
    <a href="#"> Item 2 </a>
    <a href="#"> Item 3 </a>
</nav>

CSS:

.nav_menu{
    /*... blah*/
    @media all and (min-width : 500 px){
         /*... blah*/
    }
}
.nav_menu a{
    /*... blah*/
    @media all and (min-width : 500 px){
         /*... blah*/
    }
}

我所说的响应式菜单是指当页面足够大时菜单保持水平，否则它会退回到垂直菜单。我正在寻找没有 Javascript 的简约解决方案（如果可能的话，否则我想解释一下为什么不可能）。

Answer 1

从技术上讲，您没有理由必须使用无序列表和列表项。从语义上讲，锚点是锚点的列表，因此通常导航菜单都是这样构建的。但是，您为 <ul> 和 <li> 元素放置的所有样式都可以轻松地放置在 <a> 本身上。

Answer 2

如果这是您想要的极简主义解决方案，那么 CSS3 的 Flexbox 会帮助您...

.nav_menu {
  display: flex;
  align-items: center;
}
.nav_menu a {
    padding: 1em 1.4em;
}
@media all and (max-width: 500px) {
    .nav_menu {
      flex-direction: column; /* CHANGE THE FLOW OF THE ITEMS ON SMALL SCREENS */
    }
}

/* demo */
a{background: orange;}
a:nth-of-type(odd){background: yellow;}

<nav class="nav_menu">
  <a href="#"> Item 1 </a>
  <a href="#"> Item 2 </a>
  <a href="#"> Item 3 </a>
</nav>

响应式菜单仅使用 "nav" 和 "a" 标签（无 "ul"）

Responsive menu using only "nav" and "a" tags (no "ul")

html

css

tags