I am using header tags, and I don't want line breaks after them.

I tried to use the display: inline; property, but it didn't work.

HTML:

<h5>Token No.:</h5> <h4>147</h4>

CSS:

h5 {
    display: inline;
}

This should result in no line breaks, but it gives one after "Token no.:"

I am using header tags, and I don't want line breaks after them.

I tried to use the display: inline; property, but it didn't work.

HTML:

<h5>Token No.:</h5> <h4>147</h4>

CSS:

h5 {
    display: inline;
}

This should result in no line breaks, but it gives one after "Token no.:"

• javascript
• html
• css
• web
• electron

6 Answers 6

You need both h4 and h5 display inline, may be need set !important for overriding other selector

h5, h4 {
    display: inline !important;
}

Updated:

If you want only affect to current section you can move to a div with class

<div class='token'>
   <h5>Token No.:</h5> <h4>147</h4>
</div>

css

.token h5, .token h4 {
        display: inline !important;
 }

h5, h4 {
    display: inline !important;
}

<h5>Token No.:</h5> <h4>147</h4>

you also need to put display:inline for h4 as well.

js fiddle example

h5, h4 {
  display: inline;
}

The line break that you're seeing is actually being caused by the inherent vertical margins above and below each of the heading tags; you can eliminate this by setting margin: 0 on both h4 and h5:

h4, h5 {
  margin: 0;
}

<h5>Token No.:</h5>
<h4>147</h4>

The most clean method to perform this is

<h5>Token No.: <span>147</span></h5>

Note heading tags are default block level element so whenever you stack vertically heading tags one after another it takes entire width and break the line every heading tags. So I have used inline-level element inside the block level element so it doesn't break. Inline level element stack horizontally one after another.

<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>

But block level element stack vertically

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

So if you do not want to break line in your HTML you should probably define display: inline to those both heading tags. You have set only h5 to dislay: inline;. You need to set both to display inline or set float: left; to h5 will work.

h5, h4 { float: left}

<h5>Token No.: </h5> <h4> 147</h4>

You may need to know that h1, h2, h3... have their own native style, that's why words in those tags can be bigger.

If you want to show text inline, its always better to use <span>.

<span>Token No.:</span> <span>147</span>

You can use a wrapper for your code and use the display: flex property as follows

<section class="section-wrapper">
<h5>Token No.:</h5>
<h4>147</h4>
</section>


<style> <!-- No need to use <style> tags if you have a seperate css file -->
    .section-wrapper {
      display: flex;
      flex-direction: row;
    }
</style>