如何在不向下移动的情况下缩小文本边距？

Question

我正在为freecodecamp做一个项目，我需要创建一个类似于this example的项目。

我的问题是底部的部分是无序列表和上面的标题。什么css可以使标题边距与示例中的方式对齐？我尝试过使用margin，但是它会垂直改变边距，而不仅仅是左右边距。

当前代码：

<div id=“timeline”>
  <h4>Here's a timeline of Dr. Borlaug's life</h4>
  <ul>
    <li>example</li>
    <li>example</li>
    <li>example</li>
    <li>example</li>
  </ul>
</div>

如果我有什么额外的东西让我知道，我会指出。

Answer 1

有几种方法可以做到这一点，但如果您尝试匹配您提供的示例站点，那么您的CSS和HTML应如下所示：

<div id=“timeline”>
  <ul>
    <h4>Here's a timeline of Dr. Borlaug's life</h4>
    <li>example</li>
    <li>example</li>
    <li>example</li>
    <li>example</li>
  </ul>
</div>


ul {
  max-width: 550px;
  margin: 0 auto;
  text-align: left;
}

正在使用的代码示例：https://jsfiddle.net/o96uayxc/1/

freeCodeCamp的人员已经将最大宽度应用于列表，然后使用margin: 0 auto;将元素居中。这是因为具有auto值的边距在元素的任一侧均等地填充空白空间。重要的是，标题位于其示例中的list元素内，使其保持在max-width范围内。元素文本左对齐，确保所有元素均匀对齐。