<li> 中的文本自动换行答案

【问题标题】：Text word-wrapping in <li><li> 中的文本自动换行
【发布时间】：2019-12-18 02:59:26
【问题描述】：

在我的<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>

【问题讨论】：

标签： html css responsive-design html-lists responsive

【解决方案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>

【讨论】：

谢谢！刚刚将我的列表样式位置从内部更改为外部，这解决了我的问题！

【解决方案2】：

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

【讨论】：