我如何定位<p>下一個元素<h1>元素？
[英]How do I position a <p> element under an <h1> element?
問題描述
我對網絡開發很陌生。 以為我很好地掌握了事情的竅門，直到這似乎難倒了我。 我嘗試使用浮動和位置以及其他 CSS 關鍵字移動 <p 元素。 我相當確定這是我忽略的東西，但我找不到它。
為了澄清起見，我希望 p 元素中的文本“在線計算器”位於文本“Cat Pan Liner Size Calculator”下方。 所以它看起來像這樣：
Cat 盤內襯尺寸計算器
在線計算器
我希望它在頂部的同一個容器中。 謝謝！
/* CSS Document */ body { padding: 10px; background: rgb(212, 207, 207); } div { border: 2px solid lightslategray; margin: 0 auto; width: 70%; } #titleBox { height: 100px; background-color: white; } #title { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; float: left; margin-left: 20px; } #infotitle { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 16px; float: left; } #calculator { width: 10%; height: 100%; float: right; } #main { border: 2px solid lightslategray; background-color: white; height: 800px } #linerCalculator { font-weight: bold; font-size: 16px; } #form { border: 1px solid black; width: 350px; height: 300px; background-color: rgb(243, 242, 248); border: 2px solid lightslategray; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } }
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width"> <meta name = "description" content = "Litter Box Dimensions Calculator"> <meta name = "keywords" content = "Litter, box, dimensions, calculator, elastic, liner, cat"> <meta name = "author" content = "Adam Johnes"> <title>Cat Pan Liner Size Calculator | Welcome</title> <link rel = "stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> <link rel = "stylesheet" href= "style.css"> </head> <body> <header> <div id = "titleBox" class = "container"> <!-- problem is here (I think)--> <h1 id = "title">Cat Pan Liner Size Calculator</h1> <p id = "infotitle">Online Calculator</p> <img src = "calculator.jpg" alt = "calculator" id = "calculator"> </div> </header> <section> <div id = "main" class = "container"> <h1 id = "linerCalculator">Cat Pan Liner Calculator</h1> <form id = "form" class = "w3-form w3-margin"> <label id = "labelWidth" for = "width">Width(in):</label><br> <input type = "text" id = "width" placeholder = "Enter width in INCHES"><br><br> <label id = "labelLength" for = "length">Length(in):</label><br> <input type = "text" id = "length" placeholder = "Enter length in INCHES"><br><br> <label id = "labelDepth" for = "Depth">Depth(in):</label><br> <input type = "text" id = "depth" placeholder = "Enter depth in INCHES"><br><br> <input type = "submit" id = "submit" value = "Submit"> <input type = "reset" id = "reset"> </form> </div> </section> </body> </html>
3 個解決方案
解決方案1
1 已采納 2020-11-14 03:22:12
在你的 CSS 中試試這個，它應該可以解決你的問題：
#title {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin-left: 20px;
margin-bottom: -10px;
}
#infotitle {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 16px;
margin-left: 20px;
}
解決方案2
0
您可以像這樣將 margin-left 屬性同時分配給 #title 和 #infotitle
#title{ margin-left:15px; } #infotitle{ margin-left:15px; }
如果有幫助，請告訴我
解決方案3
0 2020-11-14 06:10:56
#title, #infotitle, #linerCalculator{
/* Add padding left and right */
padding: 0 15px;
}
#infotitle{
/* Add margin-top */
margin-top: -5px;
}
在偽元素之前使用時，如何“移動” h1標簽的位置？
[英]How do I “shift” the position of h1 tag when using before pseudo element?
如何將 h1 元素添加到網格單元格以使 h1 不重疊
[英]How do I add an h1 element to a grid cell so that the h1 does not overlap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.