顯示內聯塊在我的代碼中不起作用？
[英]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.