如何实现Markdown文本两端对齐？含链接/列表内容失效问题

嘿，我之前也踩过这个坑！问题出在<p align="justify">的用法上——<p>是段落标签，它只能容纳行内元素（比如普通文本、链接），不能直接放列表这种块级元素。浏览器解析的时候，一旦碰到<li>这类块级标签，会自动提前闭合<p>，导致你的列表和链接脱离了两端对齐的上下文，甚至结构被打乱，看起来就像“消失”了一样。

给你两个实用的解决方案，看你是用Markdown还是直接写HTML：

1. 在Markdown中实现（推荐） #

不要用<p>标签包裹，而是用带CSS类的<div>来统一控制对齐，这样里面的Markdown语法（链接、列表）都能正常解析：

首先定义CSS（如果是在支持自定义CSS的平台，比如GitHub Pages、个人博客）：

.justify-block {
  text-align: justify;
}

然后在Markdown里用这个div包裹内容：

<div class="justify-block">
consectetur adipisicing elit, sed do eiusmod 
- tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, 
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

这里放链接也没问题：[Lorem ipsum dolor sit amet](some-awesome-webpage)
</div>

2. 直接写HTML的正确姿势 #

如果是纯HTML场景，要把段落、列表、链接放在一个容器里（比如<div>），而不是把块级元素塞进<p>里：

<div style="text-align: justify;">
  <p>consectetur adipisicing elit, sed do eiusmod</p>
  <ul>
    <li>tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  </ul>
  <p>链接也能正常显示：<a href="some-awesome-webpage">Lorem ipsum dolor sit amet</a></p>
</div>

这样处理后，文本能保持两端对齐，链接和列表也都能正常显示啦！

内容的提问来源于stack exchange，提问作者Zhenye Na