使h标签不换行

Question

使h标签不换行

3

我正在尝试使用HTML5来模仿APA6写作标准。我想让标题标签（<h>）3-6不换行，但不确定是否/如何通过修改CSS样式来实现此目的。脚本的JSFiddle

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

- Tyler Rinker

3个回答

3

只需在想要去除换行的 H 标签的 css 中添加 display: inline 即可。

- qualebs

1

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

请参考CSS display: inline vs inline-block。

- Chandrakant

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ralph.m · Accepted Answer

其实很简单，就像这样：

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>