Question

<header class="main-header">
  <h1 class="name"><a href="#">Best City Guide</a></h1>
    <ul class="main-nav">
      <li><a class="main-navA" href="#">ice cream</a></li>
      <li><a class="main-navA" href="#">donuts</a></li>
      <li><a class="main-navA" href="#">tea</a></li>
      <li><a class="main-navA" href="#">coffee</a></li>
    </ul>

^how i am used to writing html code

<header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <div><a class="main-navA" href="#">ice cream</a></div>
        <div><a class="main-navA" href="#">donuts</a></div>
        <div><a class="main-navA" href="#">tea</a></div>
        <div><a class="main-navA" href="#">coffee</a></div>
</header><!--/.main-header-->

^我认为可以使我们的生活更轻松的新方式。

您是否认为最好不要将UL元素用于导航，以使将Flex项目与CSS对齐更容易？可以使用div元素代替li元素？还是你们认为这不好，因为它不是语义html？

Answer 1

如果我不想使用ul和li's，这是我的首选方式

<header class="main-header">
    <div class="logo"><a href="#"></a></div>
    <div class="nav">
        <a href="#" class="main-navA1">ice cream</a>
        <a href="#" class="main-navA2">donuts</a>
        <a href="#" class="main-navA3">tea</a>
        <a href="#" class="main-navA4">coffee</a>
    </div>
</header>

仍然使用div阻止内容，但比列表清除。

FLEXBOX布局：导航问题

1 个答案: