css - 响应式菜单仅使用 "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

如果它是您想要的极简主义解决方案，那么 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>