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

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

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>

响应式菜单仅使用＆＃34; nav＆＃34;和＆＃34; a＆＃34;标签（没有＆＃34; ul＆＃34;）

2 个答案: