3

I am trying to use HTML5 to mimic APA6 writing standards. I want to make header tags (<h>) 3-6 not go to the next line and am not sure if/how I can do this by altering the css style.

JSFiddle of Script

<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>
Manoj
  • 1,860
  • 1
  • 13
  • 25
Tyler Rinker
  • 108,132
  • 65
  • 322
  • 519

3 Answers3

5

It's quite easy, actually. Something like this:

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

EDIT: actually, that doesn't work, as the p still remains below the h3. This is one solution, though it might spawn other problems:

<!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>
ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • This works if you don't have the `

    ` tag directly after. However the html I'm working with has all content wrapped in the p tags and doesn't appear to work unless they're removed.

     – Tyler Rinker Jan 08 '14 at 05:35
  • Yes, sorry, I was too hasty to answer. Have updated my answer, but not actually that happy with it just yet. – ralph.m Jan 08 '14 at 05:40
3

Just add display: inline to the css of the H tag you want to remove line break.

qualebs
  • 1,291
  • 2
  • 17
  • 34
1

you can use h{display: inline;} or h{float: left} but in first case you will lose its block element properties so you can use h{display: inline-block}

Take a look for your reference CSS display: inline vs inline-block

Community
  • 1
  • 1
Chandrakant
  • 1,971
  • 1
  • 14
  • 33