"Is there a way to align a span element on the same line as an h

I'm attempting to align a text-number (span) next to an entry-title (h2) on the same line, with the entry-meta block on the following line, including having the reading time float left. I could use some help with my CSS implementation.

Thank you.

Example:

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

This is 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>
htmlcss

Answer №1

Embracing valid HTML and flex design techniques can greatly enhance your web development experience.

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>

Answer №2

The reason why the text is not on the same line as the heading is because the heading (h2) is a block element, which makes it take up the full width of its parent element.

While using display: flex can solve this issue, it's important to understand why this formatting occurs in the first place.

In contrast, a span element is an inline element, meaning it will only occupy the width and height needed for its content rather than the full width of the parent element.

Instead of utilizing flex, you can simply change the display property of the h2 element to inline-block.


h2 {
    display: inline-block;
}

By setting the display to inline-block, the element maintains its width and height while allowing adjustments.

For further clarification, check out this resource: CSS display: inline vs inline-block

EDIT: Switching the display type of the element is a more efficient solution compared to changing the parent container to flex display. It reduces unnecessary overhead and provides a direct, native-like approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Skeleton to create a cropped text button on an iPhone

I am currently using Skeleton for my simple CSS needs. While it works fine on desktop, I have noticed that on an iPhone, the text in my button gets cropped as shown in the picture. https://i.stack.imgur.com/EYo2P.png Below is the HTML code I'm using ...

htmlcssskeleton-css-boilerplate

Is there an issue with loading CSS and JavaScript in mobile view on a website built with CodeIgniter?

My experience with codeigniter has been great so far, but I encountered an issue when trying to view my work on different devices. Here is the problem: Web: Broswer View | Browser (Responsive Design View) Mobile: Screenshot 1 | Screenshot 2 _htaccess: ...

javascriptphpcsscodeignitermobile

Aligning the last element within a list

I'm having a major issue with this code. Despite reading all related posts, I still can't get it to work. Seems like I might be missing something obvious. LOL. Here is the site (best viewed in Chrome): and here is what I believe is the simplifi ...

htmlcssgoogle-chrome

Determining the background image size of a div when the window is resized

I'm facing a problem that I can't seem to solve. I have a div with a background image. <div class="a"></div> I want to make a specific point of this background image clickable. I know I can achieve this by adding a div with a z-inde ...

javascriptjqueryhtmlcssresponsive

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssanimation

Session availability extends to subdomains, even though it may not be visible in a physical

Currently in the process of building a website Red Sec using a single account for all subdomains: Latest Updates Community Forum Personal Blog News Feed Support Us All pages share the same layout with different content by linking them to . Below i ...

javascriptphpjqueryhtmlcss

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

I have come across some examples where users can copy HTML text to the clipboard. However, I am working on something more dynamic. Here's what I'm trying to achieve: <button id="" ng-click="outputFolder()">Output Folder</button> $sc ...

javascriptjqueryhtmlangularjs

Continuously updating C# HTML parsing

I am facing a challenge with my webpage that is using AJAX queries to display data, as I need to parse this data in a C# program. The issue arises when I try to view the source code of my webpage, which does not show the data due to it being automatically ...

c#htmlajaxweb-scraping

Customizing padding and margin in material-UI styles

Having issues with excessive padding and margin inside my tab component, even after trying to override it. I've followed some suggestions on StackOverflow but none seem to work. Here's how it looks: https://i.stack.imgur.com/Bgi3u.png Here is th ...

cssreactjsmaterial-ui

What steps are needed to create a hover box that appears on the right side of my div?

I am attempting to customize the code found at this link so that the box slides to the left side instead of the right. I thought changing right: 0; to right: 100%; in the .overlay class would achieve this, but it is not working as expected. I want it to l ...

htmlcss

Is there a way to center the text vertically within an anchor tag?

How do I align text vertically within an anchor tag? Here's a visual representation of the issue: The text "Publisher Search," "Add a New Publisher," and "Edit a Publisher" should be aligned vertically in the "bar." This is the coding structure: & ...

htmlcss

Transform an xlsx document into a HTML file using VBscript or batch script

After extensive research, I have come up empty-handed in finding a solution to the issue I am facing. The problem at hand is that I have an Excel file in .xlsx format that needs to be converted to .html on a regular basis throughout the day. Once converte ...

htmlexcelbatch-filevbscriptxlsx

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

Is there a way to customize the background color when the Bootstrap 4 toggle switch is in the "checked" position?

I'm struggling to find a way to adjust the background color of the "checked" state for this toggle switch in Bootstrap 4. It utilizes an additional library for toggling between dark and light modes - you can find it here on github. While that function ...

csscheckboxbootstrap-4

How to target the nth child element uniquely in CSS

Is there a way to style items 1 through 10 in CSS without using nth-child selectors individually? Instead of doing: &.nth-child(1) { //style } &.nth-child(2) { //style } &.nth-child(3) { //style } I'm looking for a range selector in C ...

htmlcsssass

Tips for saving and accessing Shopping Cart items using localstorage

As I develop a shopping cart for an e-commerce site, I aim to utilize browser localstorage to store the products. The functions that have been added to my code include: - addToCart(): triggered when the "Add to Cart" button is clicked. - addProduct(): ...

javascriptjqueryhtml

Expand the column to occupy the remaining height of the row

I've been on the hunt for a solution to this issue, but I haven't had any luck finding one. Various flexbox properties like flex-grow: 1; and align-self: stretch; have been attempted, but none seem to achieve the desired outcome. The goal is to ...

htmlcssbootstrap-4flexbox

Issue with displaying Favicon on staging server

I need assistance with this issue. I am working to show a title and logo on a tab. It is functioning correctly on my local machine, but the logo is not appearing on the staging server. <title>Global</title> <link type="image/png" href ...

htmlcssreactjsbootstrap-4

Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...

javascripthtmlcsschart.js

Having trouble triggering a click event with JQuery

I have a hidden link for downloading Audio Files that I want the user to access using a button. However, I am having trouble triggering the click event. Below is the HTML code: <a class="APopupDown" data-icon="home" id="DownloadFile" href="http://yaho ...

javascriptjqueryhtmlclicksimulate