display inline-block失效求助：需实现段落同行、文章分行布局

我在FreeCodeCamp学基础HTML，之前代码运行正常，改了内容出问题后，删掉所有修改再跑，显示效果和原来不一样。反复核对代码和教程完全一致，但布局还是不符合预期。

需求：每个article元素内的p元素在同一行，且每个article单独占一行。

当前显示效果：

CSS代码 #

h1,
p,
h2 {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: cornflowerblue;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

body {
  background-image: url("Baggrund_2.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: sans-serif;
}

.på_linje {
  display: inline-block;
}

.smag,
.sandwich {
  text-align: left;
  width: 75%;
}

.pris {
  text-align: right;
  width: 25%;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ProteinRiget</title>
    <link rel="stylesheet" href="style.css"
  </head>
  <body>
    <div class="menu">
    <header>
    <h1>ProteinRiget</h1>
    <p>Est. 2027</p>
    </header>
  </body>
  <main>
    <section>
      <h2>Shakes & Smoothies</h2>
      <article class="på_linje">
        <p class="smag">John F. Kennedy shake</p>
        <p class="pris">50,-</p>
      </article>
      <article class="på_linje">
        <p class="smag">John snow shake</p>
        <p class="pris">50,-</p>
      </article>
      <article class="på_linje">
        <p class="smag">John Wayne shake</p>
        <p class="pris">50,-</p> 
      </article>
      <article class="på_linje">
        <p class="smag">John Cena shake</p>
        <p class="pris">50,-</p>
      </article>
      <article class="på_linje">
        <p class="smag">John Mayer shake</p>
        <p class="pris">50,-</p>
      </article>
    </section>
    <section>
      <h2>Sandwiches</h2>
      <article class="på_linje">
        <p class="sandwich">John(ny) Depperoni</p>
        <p class="pris">60,-</p>
      </article>
      <article class="på_linje">
        <p class="sandwich">John(ny) Bravoioli</p>
        <p class="pris">65,-</p>
      </article>
      <article class="på_linje">
        <p class="sandwich">John(ny) Knoxckle</p>
        <p class="pris">50,-</p>
      </article>
      <article class="på_linje">
        <p class="sandwich">John(ny) Deluxe</p>
        <p class="pris">70,-</p>
      </article>
    </section>
    </div>
  </main>
</html>

1. 修复HTML结构错误 #

你的HTML里</body>标签提前闭合了，main标签被放在了body外面，这是无效的HTML结构，浏览器会自动修正导致布局混乱。把</body>移到</main>后面，确保所有内容都在body内部。

2. 调整CSS实现预期布局 #

要实现每个article单独占一行，且内部p元素同行显示，用Flex布局更简单：

• 修改.på_linje的样式，设置为display: flex; align-items: center; width: 100%; margin: 8px 0;，这样每个article占满一行，内部元素垂直居中。
• 去掉.smag、.sandwich的宽度设置，给.pris加margin-left: auto;，让价格自动靠右对齐，无需固定宽度，适配性更好。

修正后的完整代码 #

CSS代码

h1,
p,
h2 {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: cornflowerblue;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

body {
  background-image: url("Baggrund_2.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: sans-serif;
}

.på_linje {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 8px 0;
}

.smag,
.sandwich {
  text-align: left;
}

.pris {
  text-align: right;
  margin-left: auto;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ProteinRiget</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="menu">
      <header>
        <h1>ProteinRiget</h1>
        <p>Est. 2027</p>
      </header>
      <main>
        <section>
          <h2>Shakes & Smoothies</h2>
          <article class="på_linje">
            <p class="smag">John F. Kennedy shake</p>
            <p class="pris">50,-</p>
          </article>
          <article class="på_linje">
            <p class="smag">John snow shake</p>
            <p class="pris">50,-</p>
          </article>
          <article class="på_linje">
            <p class="smag">John Wayne shake</p>
            <p class="pris">50,-</p> 
          </article>
          <article class="på_linje">
            <p class="smag">John Cena shake</p>
            <p class="pris">50,-</p>
          </article>
          <article class="på_linje">
            <p class="smag">John Mayer shake</p>
            <p class="pris">50,-</p>
          </article>
        </section>
        <section>
          <h2>Sandwiches</h2>
          <article class="på_linje">
            <p class="sandwich">John(ny) Depperoni</p>
            <p class="pris">60,-</p>
          </article>
          <article class="på_linje">
            <p class="sandwich">John(ny) Bravoioli</p>
            <p class="pris">65,-</p>
          </article>
          <article class="på_linje">
            <p class="sandwich">John(ny) Knoxckle</p>
            <p class="pris">50,-</p>
          </article>
          <article class="på_linje">
            <p class="sandwich">John(ny) Deluxe</p>
            <p class="pris">70,-</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Johnnyboy34