What is the best way to make all <li> elements appear on one line above, regardless of the content within each <li>?

Is there a way to align all li elements on the same line regardless of their content? Check out this screenshot for reference: ?

The main issue I'm facing is that when I try to code it, the content within each li element shifts the other lis like this:

Here's the code:

<ul class="section-how__steps">
  <li class="section-how__step">
    <h3 class="section-how__step_of">1 step</h3>
    <div class="section-how__step_details">
      <h4 class="section-how__step_heading">Lorem Ipsum</h4>
      <p class="section-how__step_info">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A, vero, expedita voluptate perferendis repudiandae dolorum velit veritatis, blanditiis et consequatur quasi esse itaque impedit quo. Placeat obcaecati dolore nesciunt ducimus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et ullam iusto magnam qui nihil doloremque sit ab labore repudiandae sint aperiam repellat, natus, veritatis tempora necessitatibus asperiores est perferendis expedita?
      </p>
    <a class="section-how__button" href="">Lorem Ipsum</a>
    <a class="section-how__button" href="">Lore Ipsum</a>
    </div>
    <div class="section-how__banner">
      <a href="" class="section-how__banner_info"></a>
    </div>
  </li>
  <li class="section-how__step">
    <h3 class="section-how__step_of">2 step</h3>
  </li>
  <li class="section-how__step">
    <h3 class="section-how__step_of">3 step</h3>
  </li>
  <li class="section-how__step">
    <h3 class="section-how__step_of">4 шаг</h3>
  </li>
</ul>
htmlcsshtml-lists

Answer №1

If you're interested in creating pure CSS and HTML tabs, check out this informative article.

.tabs {
  position: relative;
  min-height: 200px; /* This part sucks */
  height: 100%;
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type="radio"] {
  opacity: 0;
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.content > * {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.6s ease;
}
[type="radio"]:focus ~ label {
  outline: 2px solid blue;
}
[type="radio"]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type="radio"]:checked ~ label ~ .content {
  z-index: 1;
}
[type="radio"]:checked ~ label ~ .content > * {
  opacity: 1;
  transform: translateX(0);
}
<div class="tabs">
    <div class="tab">
      <input type="radio" id="tab-1" name="tab-group-1" checked>
      <label for="tab-1">Tab One</label>
      <div class="content">
        <p>Stuff for Tab One</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
          quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
          ultricies mi vitae est. Mauris
          placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
          commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
          sagittis tempus lacus
          enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus,
          tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
          accumsan porttitor, facilisis
          luctus, metus</p>
      </div>
    </div>
    <div class="tab">
      <input type="radio" id="tab-2" name="tab-group-1">
      <label for="tab-2">Tab Two</label>
      <div class="content">
        <p>Stuff for Tab Two</p>
        <img src="//placekitten.com/200/100">
      </div>
    </div>
    <div class="tab">
      <input type="radio" id="tab-3" name="tab-group-1">
      <label for="tab-3">Tab Three</label>
      <div class="content">
        <p>Stuff for Tab Three</p>
        <img src="//placekitten.com/200/100">
      </div>
    </div>
  </div>

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

Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar. I am currently working on an angular application using the Ionic framework for testing purpos ...

htmlcssangularjsionic-framework

Despite being correctly linked in EJS and without any errors, the CSS is still not loading

Hey there, I'm facing an issue with linking a CSS file to an EJS file. I believe that I am connecting them correctly: <head> <title>Acres & Karats Calculator</title> <base href="/"> <link type="text/css" href="css/Acres ...

cssnode.jsexpressejs

jQuery form experiencing a small problem

I need assistance with a form that has four fields. Specifically, I am looking for a solution where the visibility of the County field is dependent on the selection made in the Country field. When UK is chosen in the Country field, I want the County field ...

jqueryhtml

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Attempting to Create a New User and Display the Resulting Page Using JavaScript and Handlebars Templates

I've implemented a form that allows users to input data. https://i.sstatic.net/prh11.png Once the user hits "Add User", they are successfully added to the database. However, instead of transitioning to the next page as expected, the form remains popu ...

javascripthtmlnode.jshandlebars.js

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

What is the best way to show the response data in an input text field within an HTML form?

I'm new to working with node.js and I've encountered an issue. I need to display the data of the currently logged in user in input fields. With the following code, I can access the data of the logged-in user and display it on the console: See O ...

htmlnode.js

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

htmlcss

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

The pre-loader is hidden behind the block content and navigation bar

I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...

javascriptjqueryhtmlcssdjango

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

htmlangulartypescript

After changing the form action using jQuery, the GET variables mysteriously vanish

I am attempting to modify the action URL of a form using jQuery. Below is the code I have implemented: <form id='form_a' action='browse.php' method='get'> <input type="submit" value="Filter" id='but_a'& ...

javascriptjqueryhtml

Text wrapped automatically to display multiple lines with spacing between each highlighted line

Question about CSS formatting and spacing. I need to automatically break sentences into new lines based on the width of the container. For example, a sentence like: This is a sentence should be displayed as: This is<br>a sentence I am trying ...

htmlcssfrontend

In the event of a 404 error, simply direct the user to the pageNotFound before ultimately guiding them back

I'm developing a website with Node JS and I want to implement a feature where if the user attempts to navigate to a non-existent page, they are redirected to a "Page Not Found" message before being automatically taken back to the home page after a few ...

javascripthtmlnode.jsejs

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

cssadminlte

A guide to styling a Bootstrap 5 navigation bar

My goal is to have my Bootstrap 5 navigation menu wrap until reaching an xs-sized screen and then display the small screen pills. Currently, it does not wrap properly and when it reaches xs size, the menu disappears without showing the pills. Here's m ...

htmlbootstrap-5

I want to display a div above an image when hovering over it

.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...

jquerycss

Locating the elusive comma - unraveling the mystery of Javascript Arrays nested within Objects

I've managed to put together something that functions as intended, but I'm facing an issue where I get a comma between entries when there are multiple ones. Here's the code snippet: chrome.runtime.onMessage.addListener(function (message, s ...

javascripthtmlgoogle-chrome-extension

What is the best way to add HTML formatted text into Outlook?

In my Emacs, I've generated this syntax-highlighted code snippet and now want to paste it into an Outlook email with rendered HTML (without the actual HTML code). <pre> <span style="color: #a020f0; background-color: gtk_selection_bg_color;"& ...

htmlwindowsemailoutlook

Struggling to eliminate the scrollbar on a Material UI Dialog

I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...

javascriptcssreactjsmaterial-ui