如何在不向下移动的情况下使我的文本边距变小？答案

【问题标题】：How to make my text margin smaller without moving it downward?如何在不向下移动的情况下使我的文本边距变小？
【发布时间】：2019-02-15 07:16:25
【问题描述】：

我正在为 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>

如果我缺少任何额外的东西，请告诉我，我会指定。

【问题讨论】：

请提供相关代码，以便我帮您解决。由于我看不到您的代码 ID，因此只需猜测如何解决此问题。以下是有关提问的帮助页面指南：stackoverflow.com/help/mcve
好的，我把我当前的 HTML 放进去
我已经用您提供的有限代码尽我所能回答了。它有点熊，但它遵循您提供的示例网站中使用的完全相同的方法
请注意，margin 是所有四个方向属性的简写； margin: 5px; 将在 所有四个基本方向 上应用 5px 的边距。阅读developer.mozilla.org/en-US/docs/Web/CSS/margin 了解更多信息。

标签： html css margin

【解决方案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 的边距均匀地填充元素两侧的空白空间。重要的是，标题在他们的示例中的列表元素内，使其保持在最大宽度内。元素文本是左对齐的，这样可以确保它们都对齐。

【讨论】：