html - 在 li 旁边的一列中将 对齐到 内

Question

我有一个 <ul>在 <li> 里面我想像这样对齐文本(见屏幕截图)。

我该怎么做？

<ul>
  <li>TEXT 1</li>
  <li>
    <span>TEXT 2</span>
    <ul>
      <li>TEXT A</li>
      <li>TEXT B</li>
      <li>TEXT C</li>
    </ul>
  </li>
  <li>TEXT 3</li>
</ul>

Answer 1

你可以简单地使用display: flex

.flexcontainer {display: flex}

<ul>
  <li>TEXT 1</li>
  <li class="flexcontainer">
    <span>TEXT 2</span>
    <ul>
      <li>TEXT A</li>
      <li>TEXT B</li>
      <li>TEXT C</li>
    </ul>
  </li>
  <li>TEXT 3</li>
</ul>