如何缩进段落，使其与上面的列表项水平对齐

Question

我有以下 CSS 和 HTML:

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  /*
  How do this need to be formulated so that the paragraph starts at
  exactly the same horizontal position as the text of the list items?
  */
  margin-left: 2em;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

我想将段落与其上方的列表元素水平对齐，以便它从与列表元素文本完全相同的位置开始。只是列表项的文本和段落的文本应该对齐，即如下图所示：

这能以某种方式完成吗？

Answer 1

检查 ol 标签上的填充，然后将 margin-left:40px 添加到 p 标签

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  /*
  How do this need to be formulated so that the paragraph starts at
  exactly the same horizontal position as the text of the list items?
  */
  margin-left: 40px;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

Answer 2

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  /*
  How do this need to be formulated so that the paragraph starts at
  exactly the same horizontal position as the text of the list items?
  */
  margin-left: 2.5em;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

Answer 3

无序列表（ol's）有一个默认值 padding-inline-start: 40px;。意思是每个 child li 从 40px 开始缩进。因此，如果您希望 p 从 li 开始的位置开始，我会添加相同的样式。

您可以根据段落的起始位置调整 padding-inline-start。但是，40px 会让您找到列表项的起始位置。

:root {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

body {
  display: flex;
  justify-content: center;
  margin: 10px;
  border: 0;
  padding: 0;
}

main {
  width: min(100%, 1000px);
  counter-reset: section;
}

h1 {
  font-size: 20px;
  line-height: 40px;
}

h2 {
  font-size: 18px;
  margin-top: 30px;
  counter-increment: section;
}

p {
  padding-inline-start: 40px;
}

li::before {
  display: inline-block;
  content: counter(section) ".";
  width: 2em;
  margin-left: -2em;
}

li:not(:last-child) {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Indentation Test</title>
</head>

<body>
  <main>
    <h1>An awesome title</h1>
    <h2>1. A section</h2>
    <ol>
      <li>An entry</li>
      <li>Another entry</li>
    </ol>
    <h2>2. Another section</h2>
    <p>This paragraph should have the same indentation as the above list elements</p>
  </main>
</body>

</html>

如何缩进段落，使其与上面的列表项水平对齐

How to indent a paragraph so that it aligns horizontally with above list items

html

css

alignment

indentation