显示内联块在我的代码中不起作用？
[英]display inline-block doesn't work in my code?
问题描述
我在 freecodecamp 上做一个基本的 html 课程，我让这个工作正常。 当我尝试自己进行一些更改并添加不同的东西时，它的行为很奇怪。 然后我决定删除所有更改并重新启动，但它看起来和以前不一样了。 我尝试为我的文章设置不同的设置，尝试添加新的部分、文章和段落，但对我来说，似乎代码不像以前那样运行。 我不仅有 double og Triple，而且 quintuple 检查了我的代码，以确保它与 freecodecamp 上的相同，并且它是，但它看起来根本不一样。 我不知道我是否遗漏了什么，但如果有人能找出问题出在哪里，也许我可以停止用头撞桌子。 我希望段落在同一行，并且我希望我的文章在每一行上分开。
结果：
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%; }
<,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 个解决方案
解决方案1
0 2022-09-15 13:05:06
我希望段落在同一行，并且我希望我的文章在每一行上分开。
为此，您的段落需要是 inline-block 并且文章应该是块。
为什么 display:inline-block 不适用于我的 HTML？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.