简单 HTML/CSS：将段落放在 header 之后与 header 内联？

Question

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>

预期输出：

Let's try to make a header be inline with the next paragraph.

This is a header. 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.

And now we have some more text.

我实际得到的是：

Let's try to make a header be inline with the next paragraph.

This is a header.

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.

And now we have some more text.

我几乎可以肯定问题是我在 header 之后开始一个新段落。问题是，我正在应用样式的 HTML 代码不是我自己的 - 它是由另一个我没有源代码的工具生成的，所以我不能只是删除段落，或者直接给段落添加样式。以上是否可以完全使用给定的 HTML 代码并仅使用 CSS?

编辑： 建议的使用 h4; h4 + p 的解决方案确实有效——前提是 <h4> 标记后至少有两个段落。以下 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>
  <h4>This is another header...</h4>
  <p>And now we have some more text.</p>
</body>
</html>

结果：

Let's try to make a header be inline with the next paragraph.

This is a header. 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. This is another header... And now we have some more text.

预期结果：

Let's try to make a header be inline with the next paragraph.

This is a header. 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.

This is another header... And now we have some more text.

Answer 1

听起来您只是想让 header 和它旁边的段落内联？

h4,
h4 + p {
  display: inline;
}

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

Answer 2

我会通过在你的 h4:

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

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

简单 HTML/CSS：将段落放在 header 之后与 header 内联？

Simple HTML/CSS: Place paragraph after header inline with header?

html

css

inline