<li> 中的文本自动换行

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; 而不是 inside。试试这个：

.plans {
  text-align: center;
}

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

Answer 2

您可以使用 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>

<li> 中的文本自动换行

Text word-wrapping in <li>

html

css

html-lists

responsive-design

responsive