html - 中的文本自动换行

Question

在我的 <li></li>单词环绕在要点下方，而不是环绕在句子的第一个字母下方。

我能够实现将元素符号点居中到页面中心并使文本左对齐。现在，我希望我的文字环绕在句子的第一个字母下方，而不是超出第一个字母的左侧朝向要点。

当我将其调整为移动尺寸时，这一切都会发生。

.plans {
  text-align: center;
}

.plans ul {
  display: inline-block;
  list-style-position: inside;
  text-align: left;
}

<div class="plans">

  <h2>In magna dolor enim id reprehenderit sint magna in.</h2>

  <ul>
    <li>Do anim aliqua veniam ullamco proident</li>
    <li>Magna ex in reprehenderit ut officia in do aliqua ut.</li>
    <li><strong>Do dolore cupidatat</strong> nostrud do anim adipisicing nostrud et dolore sed excepteur.</li>
    <li><strong>Duis nulla aliqua</strong> esse adipisicing et officia reprehenderit.</li>
  </ul>list

</div>

Answer 1

您可以使用 list-style-position更改元素符号点的定位方式 - outside 就是您在这种情况下要查找的内容

.plans {
  text-align: center;
  width: 500px;
}

.plans ul {
  display: inline-block;
  list-style-position: outside;
  text-align: left;
}

<div class="plans">

  <h2>In magna dolor enim id reprehenderit sint magna in.</h2>

  <ul>
    <li>Do anim aliqua veniam ullamco proident</li>
    <li>Magna ex in reprehenderit ut officia in do aliqua ut.</li>
    <li><strong>Do dolore cupidatat</strong> nostrud do anim adipisicing nostrud et dolore sed excepteur.</li>
    <li><strong>Duis nulla aliqua</strong> esse adipisicing et officia reprehenderit.</li>
  </ul>

</div>