Question

所以我一直在研究一个HTML文件，而我刚刚制作了标题。但由于某种原因，每当我打开HTML文件时，没有元素将位于同一行，其显示属性在块中默认。这是我的代码：

HTML：

＆＃13;

<!DOCTYPE html>
<html>
 <head> 
    <title> Squidward Tentacles</title> 
	<link type="text/css" rel="stylesheet" href="homepagecss.css">
 </head>
 <body>
  <div id="title">
    <h1> Your place for everything Squidward! </h1>
  </div>
  
  <div id="header"> 
    <p> Home </p> <p> Chat </p> <p> Software </p> <p> News </p>
  </div>
 </body>
</html>

＆＃13;

CSS：

＆＃13;

#title{
	font-family: Verdana;
	text-align: center;
}

#header{
	border: 5px solid #fc6703;
	background-color: #fc6703;
	font-size: 40px;
	font-family: Verdana;
	margin: auto;
	padding-left: 30px;
	padding-right: 30px;
}

＆＃13;

这只是为了练习我的HTML和CSS，因为我是初学者，所以请不要问我为什么要这么做关于Squidward。无论如何，如果你能告诉我发生了什么以及我做错了什么，我们将不胜感激。

谢谢！

Answer 1

<div>和<p>是块元素; HTML / CSS规范说它们默认为display: block。

内联元素包括<span>和<a>。

您可以通过在CSS中手动设置display:来覆盖任何元素。

Answer 2

正如SLaks所说，<p>元素作为默认显示为块元素，导致它显示在单独的一行上。

将此添加到您的css以在同一行显示它：

#header > p {
    display: inline-block;
}

为什么我的标题默认为display：block？

2 个答案: