如何将列表内容左对齐？

Question

我正在尝试将我的列表内容向左对齐，但不太清楚如何。在此先感谢您的任何建议。这是代码示例：

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

Answer 1

为ul设置padding-left: 0;

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>

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

如何将列表内容左对齐？

How do I align list content to the left?

html

css

html-lists