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元素内部，从而使标题保持在该最大宽度内。元素文本保持左对齐，以确保所有元素均等对齐。

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

1 个答案: