CODEWITHSUNDEEP
css
RegEdit
RegEdit

Reputation: 2162

How to convert a block level element to inline via CSS

Let's say I have this content:

<div class="entry">
<p>I want to display <br /><h2>heading level elements like this</h2>
<p> as inline elements on the same line with the text that preceded them as well as...</p>
<p>the text that<br />
<h3>(another heading element)</h3>
<p>, follows them...</p>
</p></p>
</div>

And I want the heading elements to appear inline in the text, just as if they were simply bold text, the same size as the content.

Any ideas what CSS would accomplish this with the above example, without altering the content?

Upvotes: 2

Views: 31914

Answers (4)

Aman Akhtar
Aman Akhtar

Reputation: 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>block to inline</title>
    <style>
         h1 {
            display: inline;
         }
         span {
            display: block;
         }
    
    </style>

</head>
<body>
       
       <p>lorem itaque <h1>block element to inline</h1> quia <p>

       <p>lorem res <span>inline to block </span> reprehenderit, anime</p>
</body>
</html>

Upvotes: -1

GregM
GregM

Reputation: 2654

You can do something like that : 

 h3{display:inline; }

Or you can put a span instead and give it the same style as H3

<div class="entry">
<p>I want to display <br /><h2>heading level elements like this</h2>
<p> as inline elements on the same line with the text that preceded them as well as...</p>
<p>the text that<br />
<span class="h3Like">(another heading element)</span>
<p>, follows them...</p>
</p></p>
</div>

And add css like this

.h3Like{font-size:15px;font-weight:bold}

Upvotes: 0

Vivin Paliath
Vivin Paliath

Reputation: 95598

You can use display: inline or display: inline-block. Use the latter if you want to set the width or height on the element. inline-block behaves like a block element except that it renders it inline.

.entry h2, .entry h3 {
    display: inline;
}

Upvotes: 3

Rob W
Rob W

Reputation: 349252

Use the display:inline property:

.entry h2,  /* Combining two selectors: h2/h3 as a child of class=entry */
.entry h3 {
    display: inline;
}

See also: MDN, CSS display

Upvotes: 5

Related Questions