How to put span same line with h2?

Question

I have tried to put text-number(span) next to entry-title(h2) in a line and then next line is entry-meta block in next line like below with reading time float left. I need support with CSS.

Thanks.

Ex:

TOGAF – Enterprise Architecture Framework 3 icon-comment
Avartar-image | abc July 31, 2019            3 mins read

My current HTML-markup.

<pre>
      <header class="entry-header">
            <h2 class="entry-title" ><a>TOGAF – Enterprise Architecture Framework</a></h2>
            <span class="text-number"> 3 <i class="fa fa-comment"></i> </span>
            <div class="entry-meta">
                <span class="posted-on">July 31, 2019</span> 
                <span class="byline"><img>avatar-image</img></span>
                <span class="author-name" >abc</span>
            </div>
      </header>
</pre>

use a valid html . to test if your html is okay, you may use https://validator.w3.org/nu/#textarea . first step is to remove the pre tag wrapping header — G-Cyrillus, Nov 23 '19 at 00:13
It's the current page template in WordPress. I'm not sure to touch it and just want use CSS to solve the issue. — An Nguyen, Nov 23 '19 at 00:16
i guess you can edit the template to wrap the span and the icone into a p tag and remove the pre tag. — G-Cyrillus, Nov 23 '19 at 00:21
I change p tag wrap the span is a trick like you said. It works like a charm without edit template. Thanks G-Cyr. voted for your solution! — An Nguyen, Nov 23 '19 at 02:30

G-Cyrillus · Accepted Answer · 2019-11-23T00:25:53.817

a valid html and flex can be your best friend.

header,
header div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 600px;
  margin: auto;
}

.byline {
  order: -1;
  margin-right: 0;
}
header div:before {
content:'';
border-left:solid 2px;
margin:auto 1em;
padding-top:1em;
}
.posted-on {
  margin-left: 0;
  margin-right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<header class="entry-header">
  <h2 class="entry-title"><a>TOGAF – Enterprise Architecture Framework</a></h2>
  <p><span class="text-number"> 3 <i class="fa fa-comment"></i> </span></p>
  <div class="entry-meta">
    <span class="posted-on">July 31, 2019</span>
    <span class="byline"><img src="avatar.jpg" alt="avatar"></span>
    <span class="author-name">abc</span>
  </div>
</header>

Thanks G-Cyr. It works like a charm. We just add more p tag is a trick to put number of comment inline with title. I tried flex box before that but it did not work. — An Nguyen, Nov 23 '19 at 02:09

score 1 · Answer 2 · answered Nov 23 '19 at 00:27

The reason why it's not on the same line is because h2 is a block element, which means it will take up the full width of the parent element.

Using display: flex will definitely work, however its very important to know why this is happening.

A span element on the other hand is an inline element. Meaning that, it will occupy the width & height of the value, rather than the full width of its parent.

Instead of using flex, you can simply change the display type of h2 to inline-block.

h2{
display: inline-block;
}

inline-block allows the element to occupy the width and height of its value, but also adjust the width and height.

A great explanation is found here: CSS display: inline vs inline-block

EDIT: Changing the element's display type is a much better solution than changing the parent's display to flex.

It's much less overhead, and is a direct native-like solution.

How to put span same line with h2?

2 Answers2