html странное поведение во фрагменте stackoverflow

Question

Я пытаюсь привести в порядок следующий код html, и получаю странный результат. Элементы li не выровнены. Правильно ли иметь тег al ul и текст внутри 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.

Если у вас была базовая c навигация это выглядело бы как

    <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 отступ не имеет значения, ваш код будет отлично работать при любом отступе sh.

аккуратный код (отступ с двумя пробелами):

<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>