简单HTML/CSS：将段落放在标题后，与标题内联？_Html_Css_Inline

简单HTML/CSS：将段落放在标题后，与标题内联？

html css

简单HTML/CSS：将段落放在标题后，与标题内联？,html,css,inline,Html,Css,Inline,CSS代码： h4 { display: inline; font-weight: bolder; font-size: 100%; margin: 0; } HTML测试代码： <html> <head><link rel="stylesheet" href="style.css" type="text/css" /></title>test</title></head> <body

CSS代码：

h4 {
    display: inline;
    font-weight: bolder;
    font-size: 100%;
    margin: 0;
}

HTML测试代码：

<html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></title>test</title></head>
<body>
  <p>Let's try to make a header be inline with the next paragraph.</p>
  <h4>This is a header.</h4>
  <p>A header is an HTML element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat enim eget porta. Proin condimentum dui sed tortor semper, non scelerisque risus volutpat. Vivamus vel risus in purus imperdiet finibus. Phasellus placerat nunc a orci ullamcorper, non ultricies neque auctor. Integer magna lectus, vulputate laoreet auctor eu, gravida et lorem.</p>
<p>And now we have some more text.</p>
</body>
</html>

结果:

让我们尝试使标题与下一段保持一致

这是一个标题。标题是一个HTML元素。Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。肉饼、非十字勋章的调味汁。purus中的Vivamus vel risus。帕塞勒斯·普莱瑞特·努克·奥奇·乌兰科珀，非尤里西斯·内克·奥克托。大整数，秃鹫laoreet拍卖人eu，孕妇和知识这是另一个标题…现在我们有更多的文本

预期结果：

让我们尝试使标题与下一段保持一致

这是另一个标题…现在我们有更多的文本

听起来你只是想把标题和它旁边的段落内联起来

h4，
h4+p{
显示：内联；
}

让我们尝试使标题与下一段保持一致
这是一个标题。
标题是一个HTML元素。Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。肉饼、非十字勋章的调味汁。purus中的Vivamus vel risus。Phasellus
Placelat nunc是一家奥奇乌兰科珀，非ultricies neque拍卖行。大整数，秃鹫laoreet拍卖人eu，孕妇和知识
现在我们有了更多的文本。

我将通过在您的

h4

之前添加一个伪元素来修改@Nit的代码：

h4,
h4 + p {
  display: inline;
}
h4:before {
   content: "";
   display: block;
   clear: left;
   margin-top: 1em;
}

好吧，我确实发现了一个这样不起作用的案例。。。一些标题一些段落文本。

另一个标题更多的段落文本。

如果你有这个，所有四个块都会以一个段落的形式显示出来……这太完美了。非常感谢。

h4,
h4 + p {
  display: inline;
}
h4:before {
   content: "";
   display: block;
   clear: left;
   margin-top: 1em;
}