-2

Example:

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>

How would I all these elements on the same line instead of each one being put on a new line by default.

Any help is sincerely appreciated :)

Steve Burden
  • 1
  • what kind of elements are you using? – wirey00 Aug 05 '14 at 00:16
  • look at this question http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – wirey00 Aug 05 '14 at 00:17
  • As an aside, while you will doubtless get some answers that will show you how to do this, you should reconsider whether it is a good idea. These elements are generally understood to be block elements, and changing their behavior has the potential to confuse anyone else who works on this project with you (or you, later, after you get more familiar with what you're doing, and jump back to this project.) If you're looking for specific layouts that these elements are giving you, you can recreate those styles without using those tags. – Beska Aug 05 '14 at 00:22

3 Answers3

0

Add display: inline or display: inline-block to the CSSs OF the elements:

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>

OUTPUT:
S
ame
li
ne

Add the CSSs:

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>
<style>
    h1, h2, p {
        display: inline;
    }
</style>

OUTPUT:
Sa me li ne
Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
0

These (by default) are displayed as block elements.

Using CSS, you can change the way they behave.

For example, by default display parameter in CSS for the <h1> tag in CSS is this:

h1 { display: block; }

To make it appear inline, you would do:

h1 { display: inline-block; }

So if you were to do:

h1, h2, p { display: inline-block; }

The output of your HTML code:

<h1>s</h1>
<h2>ame</h2>
<p>li</p>
<p>ne</p>

Would be:

sameline

View this answer to understand the differences between block and inline-block: https://stackoverflow.com/a/14033814/1332068

Community
  • 1
  • 1
Axel
  • 10,732
  • 2
  • 30
  • 43
0

I don't know why you are using those HTML Elements but with CSS you can achieve it:

 <h1 style="display:inline-block">s</h1><h2 style="display:inline-block">ame</h2><p style="display:inline-block">li</p><p style="display:inline-block">ne</p>
kimbarcelona
  • 1,136
  • 2
  • 8
  • 19