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>

预期产出：

让我们尝试使标题与下一段内联。

这是标题。标题是HTML元素。 Lorem ipsum dolor坐下来，精致的adipistur 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。

现在我们还有更多文字。

我实际上得到了什么：

让我们尝试使标题与下一段内联。

这是标题。

标头是HTML元素。 Lorem ipsum dolor坐下来，精致的adipistur 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。

现在我们还有更多文字。

我几乎是肯定的，问题是我在标题后面开始一个新段落。问题是，我正在应用样式的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>

结果：

让我们尝试使标题与下一段内联。

这是标题。标题是HTML元素。 Lorem ipsum dolor坐下来，精致的adipistur 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。 这是另一个标题...... 现在我们还有更多文字了。

预期结果：

让我们尝试使标题与下一段内联。

这是标题。标题是HTML元素。 Lorem ipsum dolor坐下来，精致的adipistur 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。

这是另一个标题...... 现在我们还有更多文字。

Answer 1

听起来你只想把标题和段落紧跟在它旁边？

＆＃13;

h4,
h4 + p {
  display: inline;
}

＆＃13;

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

＆＃13;

Answer 2

我通过在h4之前添加伪元素来修改@ Nit的代码：

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

简单的HTML / CSS：在标题内嵌标题后放置段落吗？

2 个答案: