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

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 的人员已将 max-width 应用于列表，然后使用 margin: 0 auto; 使元素居中。这是因为值为 auto 的边距会在元素的任一侧平均填充空白 space。重要的是，在他们的示例中，标题位于列表元素内，使其保持在 max-width 内。元素文本左对齐，确保所有内容均等对齐。

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

How to make my text margin smaller without moving it downward?

html

css

margin