HTML – 如何在不向下移动的情况下使文本边距变小？

2023年2月19日 210次阅读

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

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

当前代码：

<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>

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

最佳答案 有几种方法可以做到这一点,但如果您尝试匹配您提供的示例站点,那么您的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范围内.元素文本左对齐,确保所有元素均匀对齐.

点赞