Question

我正在尝试使用HTML5来模仿APA6 writing standards。我想制作标题标签（<h>）3-6不要转到下一行，我不确定是否/如何通过改变css样式来做到这一点。

<html>
<head>
<title>Title</title>
<style>
      h3 {font-size: 16px; font-weight:bold;}
</style>
</head>

<body>

<h2>What it looks like...</h2><hr>

<h3>Level 3 Header.</h3>

<p>Content here.  Lots of random text to make an academic sound smart..  I&#39;ve done my best to maintain APA6 standards in this document but within HTML5 some rules do not make sense.  For instance, there are no page breaks.</p>

<br><br><br><br>

<h2>What I'd like it to look like...</h2><hr>

<p><b>Level 3 Header.</b> Content here.  Lots of random text to make an academic sound smart..  I&#39;ve done my best to maintain APA6 standards in this document but within HTML5 some rules do not make sense.  For instance, there are no page breaks.</p>

</body>
</html>

Answer 1

只需将display: inline添加到要删除换行符的H标记的css中。

Answer 2

实际上，这很容易。像这样：

h3, h4, h5, h6 {display: inline;}

编辑：实际上，这不起作用，因为p仍然低于h3。这是一种解决方案，但它可能会产生其他问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

h3, h3+p {display: inline;}

</style>
</head>
<body>

<h3>test</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, qui.</p>

</body>
</html>

Answer 3

您可以使用h{display: inline;}或h{float: left}，但在第一种情况下，您将丢失其块元素属性，以便您可以使用h{display: inline-block}

查看您的参考CSS display: inline vs inline-block

使h标签不开始新行

3 个答案: