html - stackoverflow片段上的html整洁的奇怪行为

Question

我尝试整理以下 html 代码，但得到一个奇怪的结果。li 元素未对齐。在a

<a> Text Inside a
<ul>
  <li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>

</a>

为什么它会发生？

Answer 1

ul 标签是块元素标签 - 标签是 inline-block 元素标签 - 不建议将块元素放在 inline-block 元素中。

如果你有一个基本的导航，它看起来像

    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>

如前所述 - 在 ul 标签中，您可以分配 a 标签以导航到其他链接/网页。

Answer 2

为代码提供缩进的公认方法是使用 2 空格或 4 空格缩进（每次在下一行打开子标签时，给它 2/4 空格）。尽管在 HTML 中缩进无关紧要，但无论您希望以何种方式进行缩进，您的代码都可以正常工作。

整洁的代码（2-空格缩进）：

<a href="Link_to_anything"> Text Inside a
  <ul>
    <li>li1 content</li>
    <li>li2 content</li>
    <li>li3 content</li>
  </ul>
</a>

我添加了 href 属性，因为<a>标签的目的是将里面的内容链接到另一个网页或网页的一部分

定义：<a>标签定义了一个超链接，用于从一个页面链接到另一个页面。元素最重要的属性是 href 属性，它指示链接的目的地。

锚标签可以在其中包含大多数标签，例如<img>, <p>, <h1> to <h6>,etc. <ul>您可以在标签内完美添加<a>标签