Question

我正在一个项目上，我需要进行全屏覆盖导航，其中包括：页面（垂直导航链接），hr和社交媒体图标。对我来说，将所有这些内容放在nav标签中以对其进行样式设置比较容易。

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Our works</a></li>
    <li><a href="">Contact</a></li>
  </ul>
  <hr>
</nav>

Answer 1

尽管您可以在nav元素内使用hr元素（从语义上讲是很好的）-您最好使用样式在链接下方创建线条-例如ul上的边框底部。

nav ul {
  border-bottom: solid 1px #d4d4d4;
  padding-bottom: 8px;
  margin-bottom: 8px;
  padding-left: 0
}

nav ul li { 
  display: inline-block;
  margin-right: 16px
}

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Our works</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
<div class = "social-icons">
  <span> social icons go here </span>
</div>

从语义上来说，我可以在HTML的<nav>元素内放入<hr>吗？

1 个答案: