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

Question

我正在为 freecodecamp 做一个项目，我需要制作一个类似于这个例子的项目。

我的问题是底部带有无序列表的部分及其上方的标题。什么 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 值的边距将平均填充元素两侧的空白区域。重要的是，标题位于其示例中的列表元素内，使其保持在最大宽度内。元素文本左对齐，以确保所有文本均等对齐。