如何在<li>标签内实现文本的两列对齐布局？

以下几种方案可以实现你要的两列对齐效果，根据使用场景选择即可：

方案1：HTML列表+自定义CSS（适合支持CSS的环境） #

这种方法能保留无序列表的原生结构，同时通过CSS灵活控制两列布局和间距：

<style>
  .two-column-ul li {
    display: flex;
    justify-content: space-between;
    /* 按需设置宽度，确保内容能分成两列 */
    max-width: 400px;
  }
  /* 可选：给主题文本加样式突出显示 */
  .two-column-ul .topic {
    font-weight: 600;
  }
</style>

<ul class="two-column-ul">
  <li><span class="topic">Topic 1</span><span>(definition)</span></li>
  <li><span class="topic">Topic 2</span><span>(definition)</span></li>
  <li><span class="topic">Topic 3</span><span>(definition)</span></li>
  <li><span class="topic">Topic 4</span><span>(definition)</span></li>
  <li><span class="topic">Topic 5</span><span>(definition)</span></li>
</ul>

方案2：Markdown表格（兼容所有渲染器） #

如果不需要严格的无序列表结构，用表格是最通用的方案，所有Markdown编辑器都能正确渲染：

若不需要列表符号，可简化为：

方案3：内联样式列表（适合不能加全局CSS的场景） #

如果无法添加全局样式，给每个列表项单独加内联样式也能实现效果：

<ul>
  <li style="display: flex; justify-content: space-between; max-width: 400px;"><span>Topic 1</span><span>(definition)</span></li>
  <li style="display: flex; justify-content: space-between; max-width: 400px;"><span>Topic 2</span><span>(definition)</span></li>
  <li style="display: flex; justify-content: space-between; max-width: 400px;"><span>Topic 3</span><span>(definition)</span></li>
  <li style="display: flex; justify-content: space-between; max-width: 400px;"><span>Topic 4</span><span>(definition)</span></li>
  <li style="display: flex; justify-content: space-between; max-width: 400px;"><span>Topic 5</span><span>(definition)</span></li>
</ul>

内容的提问来源于stack exchange，提问作者jesse villanueva