如何在 <h1> 元素下定位 <p> 元素？答案

【问题标题】：How do I position a <p> element under an <h1> element?如何在 <h1> 元素下定位 <p> 元素？
【发布时间】：2020-11-14 02:43:09
【问题描述】：

我对 Web 开发很陌生。以为我已经很好地掌握了事情的窍门，直到这似乎把我难住了。我尝试使用浮动和位置以及其他 CSS 关键字移动

为了澄清，我希望 p 元素中的文本“在线计算器”位于文本“Cat Pan Liner Size Calculator”下方。所以它看起来像这样：
猫盘内胆尺寸计算器
在线计算器

我希望它在顶部的同一个容器中。谢谢！

/* 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>

【问题讨论】：

标签： html css containers element

【解决方案1】：

在你的 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】：

你可以像这样给你的 #title 和 #infotitle 赋予 margin-left 属性

#title{
margin-left:15px;
}
#infotitle{
margin-left:15px;
}

如果有帮助请告诉我

【讨论】：

【解决方案3】：

#title, #infotitle, #linerCalculator{
/* Add padding left and right */
padding: 0 15px;
}

#infotitle{
/* Add margin-top */
margin-top: -5px;
}

【讨论】：