display inline-block doesn't work in my code?
Question
I am doing a basic html course on freecodecamp and I made this work properly. 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. 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 answers
solution1
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.