显示内联块在我的代码中不起作用？
[英]display inline-block doesn't work in my code?
问题描述
I am doing a basic html course on freecodecamp and I made this work properly.
我在 freecodecamp 上做一个基本的 html 课程，我让这个工作正常。 When i tried doing some changes on my own and adding different stuff to it it acted weird.当我尝试自己进行一些更改并添加不同的东西时，它的行为很奇怪。 I then decided to delete all my changes and re-launch but then it just didn't look the same as before.然后我决定删除所有更改并重新启动，但它看起来和以前不一样了。 I have tried messing with different setups for my articles, tried adding new sections, articles and paragraphs but to me, it seems as if the code doesn't act like it did before.我尝试为我的文章设置不同的设置，尝试添加新的部分、文章和段落，但对我来说，似乎代码不像以前那样运行。 I have not just double og triple but quintuple checked my code to make sure it's identical to the one on freecodecamp and it IS, but it doesn't look the same at all.我不仅有 double og Triple，而且 quintuple 检查了我的代码，以确保它与 freecodecamp 上的相同，并且它是，但它看起来根本不一样。 I don't know if I'm missing something, but if someone could figure out where the problem occurs, maybe i could stop banging my head against my table.我不知道我是否遗漏了什么，但如果有人能找出问题出在哪里，也许我可以停止用头撞桌子。 I want the paragraphs to be on the same line and I want my articles to be separated on each line.我希望段落在同一行，并且我希望我的文章在每一行上分开。
Result:结果：
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
I want the paragraphs to be on the same line and I want my articles to be separated on each line.
For this, your paragraph needs to be inline-block and the article should be block.为此，您的段落需要是 inline-block 并且文章应该是块。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.