在li旁边的一列中的<li>内对齐<ul>

Question

我在<ul>内有一个<li>，我希望像这样对齐文字（参见屏幕截图）。

我该怎么做？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>