我对web开发很陌生。我以为我已经很好地掌握了窍门，直到这似乎让我感到困惑；带有float和position以及其他CSS关键字的p元素。我很确定这是我忽略的东西，但我找不到。
为了澄清，我希望文本"；在线计算器"；在位于文本下方的p元素中；Cat Pan衬垫尺寸计算器"；。所以它看起来是这样的：
Cat Pan Liner尺寸计算器
在线计算器
我希望它在顶部的同一个容器中。谢谢
/* 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>在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;
}
您可以像这个一样为#title和#infotitle提供margin-left属性
#title{
margin-left:15px;
}
#infotitle{
margin-left:15px;
}如果有帮助，请告诉我
#title, #infotitle, #linerCalculator{
/* Add padding left and right */
padding: 0 15px;
}
#infotitle{
/* Add margin-top */
margin-top: -5px;
}