如何将列表内容左对齐？ [复制]

【问题标题】：How do I align list content to the left? [duplicate]如何将列表内容左对齐？ [复制]
【发布时间】：2022-03-26 22:57:37
【问题描述】：

我正在尝试将我的列表内容向左对齐，但不知道怎么做。在此先感谢您的任何建议。以下是代码示例：

    <div class="col-md-4 mb-1">
        <i class="fas fa-hiking fa-4x"></i>
        <h4 class="my-4" font-weight-bold>What to bring</h4>
        <p>
            <ul style="list-style-type:none;">
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </p>
    </div>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

将padding-left: 0; 设置为ul

ul {
  padding: 0;
}

<div class="col-md-4 mb-1">
  <i class="fas fa-hiking fa-4x"></i>
  <h4 class="my-4" font-weight-bold>What to bring</h4>
  <p>
    <ul style="list-style-type:none;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </p>
</div>

【讨论】：

【解决方案2】：

尝试将padding: 0; 添加到您的<ul> 标记中。它看起来像这样：

<div class="col-md-4 mb-1">
  <i class="fas fa-hiking fa-4x"></i>
  <h4 class="my-4" font-weight-bold>What to bring</h4>
  <p>
    <ul style="list-style-type: none; padding: 0;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </p>
</div>

【讨论】：