Html 如何将段落移到标题旁边_Html_Css

Html 如何将段落移到标题旁边

html css

Html 如何将段落移到标题旁边,html,css,Html,Css,标题段落您可以将其添加到标签中：标题段落第段第段段落段落h1，p{显示：内联；垂直对齐：中间；} 默认情况下，h1和p元素具有display:block规则，这使它们占据一个全宽行。将它们设置为display:inline，将使元素占用的空间与包含的空间一样大（例如，它们占用的空间与内部文本的空间一样大），前后都没有换行符。另外，请查看此链接，了解有关应用于内联元素的边距、填充、宽度属性的其他问题的详细说明：我建议您使用内联元素，而不是使用块元素。标题{ 字体大小：24px；


标题
段落

您可以将其添加到标签中：

标题
段落
第段
第段
段落段落

h1，p{显示：内联；垂直对齐：中间；}

默认情况下，

h1

和

元素具有

display:block

规则，这使它们占据一个全宽行。将它们设置为

display:inline

，将使元素占用的空间与包含的空间一样大（例如，它们占用的空间与内部文本的空间一样大），前后都没有换行符。另外，请查看此链接，了解有关应用于内联元素的边距、填充、宽度属性的其他问题的详细说明：

我建议您使用内联元素，而不是使用块元素

。标题{
字体大小：24px；
字体大小：粗体；
}

标题
段落

我真的不喜欢将样式列为标记属性。如果您以后将css文件添加到HTML文档中，这会使读取HTML文件变得更加困难，并使事情更加复杂。如果您不想链接到外部css文件，那么我个人会使用HTML文档头部的样式标记

<html>
<head>
   <title> page title here </title>
   <meta charset ="utf-8">
   <style>
   p, h1 {
   display: inline;
   }
   </style>
</head>
<body>
   <h1> Here is our heading!</h1>
   <p> and here is our paragraph next to it. </p>
</body>
</html>


页面标题在这里
p、 h1{
显示：内联；
}
这是我们的航向！
这是我们在它旁边的一段

然而，我相信这仍然会导致该段在到达新行时在标题下环绕。如果这不是您想要的，那么您需要使用一些div标记。我会这样做

<html>
<head>
   <title> page title here </title>
   <meta charset ="utf-8">
   <style>
   .container {
       clear: both;
   }
   .headingDiv {
       float: left;
       width: 30%;
       display: inline;
    }
    .paraDiv {
        float: right;
        width: 70%;
        display: inline;
    }

   </style>
</head>
<body>
    <div class="container">
        <div class="headingDiv">
            <h1> Here is our heading!</h1>
        </div>
        <div class="paraDiv">
            <p> And here is our paragraph next to it. And here is our paragraph next to it. And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it. </p>
        </div>
    </div>
    <div class="container">
        <div class="headingDiv">
            <h1> Here is our heading!</h1>
        </div>
        <div class="paraDiv">
            <p> And here is our paragraph next to it. And here is our paragraph next to it. And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it. </p>
        </div>
    </div>
</body>


页面标题在这里
.集装箱{
明确：两者皆有；
}
.headingDiv{
浮动：左；
宽度：30%；
显示：内联；
}
帕拉迪夫先生{
浮动：对；
宽度：70%；
显示：内联；
}
这是我们的航向！
这是我们在它旁边的一段。这是我们在它旁边的一段。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落
这是我们的航向！
这是我们在它旁边的一段。这是我们在它旁边的一段。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落。这是我们旁边的段落

请将您当前的HTML和CSS包括在内好吗？这是如何询问有关Stackoverflow的问题供参考欢迎来到Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。另请参阅，这是一个如何显示的指示…因为它将对所使用的技术产生影响。我对此持中立态度，但当您的代码运行时，我怀疑结果与OP的外观不同for@Paulie_D有趣的是，它有两张选票，现在已经没有了。我只是想知道为什么。。。我能做得更好的是。。。但只要它解决了这个问题，我同意人们改变主意。我知道我在这个问题上改变了主意好几次。@Paulie_D但为什么，只有一个答案，就是这个^^^@CodeiSir我不知道为什么，但这与我的代码不起作用段落结束时重叠了我的头请加上一些解释为什么这个代码有助于作品。这将有助于提供一个未来观众可以学习的答案。有关更多信息，请参阅。默认情况下，

h1

和

元素具有

显示：块

规则，这使它们占据一个全宽行。将它们设置为

display:inline

，将使元素占用的空间与包含的空间一样大（例如，它们占用的空间与内部文本的空间一样大），前后都没有换行符。另外，请查看此链接，了解有关应用于内联元素的边距、填充、宽度属性的其他问题的详细说明：请将其添加到答案本身。评论可以随时删除。发表评论的原因是，答案出现在低质量的审查队列中，可能是因为其简短。在答案中添加该注释将弥补这一缺陷。我不知道“我真的不喜欢将样式列为标记属性”是什么意思。