What is the best way to align inline-block elements in a straight row?

Question

What is the best way to align inline-block elements in a straight row?

I am encountering an issue with the code block below:

<div class="1">
  Foo<br>1
</div>
<div class="2">
  Bar<br>2
</div>

Even though both .1 and .2 have styles of

position:relative;display:inline-block

, they are displaying as follows:

     Bar
Foo  2
1

It appears that the content of class .2 is vertically positioned correctly, but the first line of class .1 starts at the same level as the second line of .2, causing the entire div to be pushed down. This behavior is unexpected because .2 comes after .1, leading me to anticipate that .2 should be positioned relative to where .1 is located, not vice versa. This issue persists even when additional divs are added before .1. Is there a way to align them horizontally like this?

Foo Bar
1   2

html css

Answer 1

Answer №1

Just as mentioned by others, 1 and 2 are not suitable for class names; I have updated them to a and b respectively. It is true that your CSS is nested, but you did not select SCSS for your fiddle which makes it invalid CSS. Correct these two issues and everything will work smoothly:

.wrapper { position: relative; display: inline-block; }
.a, .b { position: relative; display: inline-block; }

<div class="wrapper">
  <div class="a">
    Foo<br>1
  </div>
  <div class="b">
    Bar<br>2
  </div>
</div>

Additionally, please ignore suggestions regarding the use of tables and floats. While they are not incorrect, they may not specifically address the issues in your code.

Answer 2

Just as mentioned by others, 1 and 2 are not suitable for class names; I have updated them to a and b respectively. It is true that your CSS is nested, but you did not select SCSS for your fiddle which makes it invalid CSS. Correct these two issues and everything will work smoothly:

.wrapper { position: relative; display: inline-block; }
.a, .b { position: relative; display: inline-block; }

<div class="wrapper">
  <div class="a">
    Foo<br>1
  </div>
  <div class="b">
    Bar<br>2
  </div>
</div>

Additionally, please ignore suggestions regarding the use of tables and floats. While they are not incorrect, they may not specifically address the issues in your code.

Answer 3

Answer №2

If you desire to have the elements aligned in the manner demonstrated in your example, you have the option of utilizing float or inline-block.

.class1 {
    display: inline-block;
}
.class2 {
    float: left;
}

<div class="class1">Foo
    <br />1</div>
<div class="class1">Bar
    <br />2</div>
<hr />
<div class="class2">Foo
    <br />1</div>
<div class="class2">Bar
    <br />2</div>

It is important to note that you are using invalid classnames according to the specifications outlined here. Simply put, class names need to commence with an underscore (_), a hyphen (-), or a letter (a–z), followed by any combination of hyphens, underscores, letters, or numbers. Additionally, if the initial character is a hyphen, the succeeding character should be a letter or underscore, and the name has to be at least 2 characters in length. Identifiers can also include escaped characters and any ISO 10646 character as a numeric code.

Answer 4

If you desire to have the elements aligned in the manner demonstrated in your example, you have the option of utilizing float or inline-block.

.class1 {
    display: inline-block;
}
.class2 {
    float: left;
}

<div class="class1">Foo
    <br />1</div>
<div class="class1">Bar
    <br />2</div>
<hr />
<div class="class2">Foo
    <br />1</div>
<div class="class2">Bar
    <br />2</div>

It is important to note that you are using invalid classnames according to the specifications outlined here. Simply put, class names need to commence with an underscore (_), a hyphen (-), or a letter (a–z), followed by any combination of hyphens, underscores, letters, or numbers. Additionally, if the initial character is a hyphen, the succeeding character should be a letter or underscore, and the name has to be at least 2 characters in length. Identifiers can also include escaped characters and any ISO 10646 character as a numeric code.

What is the best way to align inline-block elements in a straight row?

Answer №1

Answer №2

Similar questions

Ways to utilize two distinct XPATH values for a single key

Implementing a redirection of Dojo Data grid cell values to a different destination

Dynamic row Material-UI input field

Is it possible to make the body background image adjust its size to the browser window

What materials are required in order to receive messages and information through my Contact page?

CSS: The border line with a see-through section

"Rearrange elements on a webpage using CSS and HTML to position one

Is Inline Styling the Key to Effective MVC Client-Side Validation?

The email verification process is experiencing technical difficulties

JavaScript functions smoothly on Google Chrome but is restricted on Internet Explorer

Is there a way to dynamically update the text in an HTML element with a randomly generated value using JavaScript?

Phonegap application functioning smoothly on computer, encountering issues on mobile device

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

Align the bottom of an image with the top of text to achieve perfect vertical alignment

The positioning attribute and flexible height in CSS are essential for creating dynamic

Getting the ID name from a select tag with JavaScript - A quick guide!

Switch the default blue color of Ngx-Pagination to a different color option

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

Avoiding additional empty lines between selectors when setting up Stylelint

Do specific elements of typography adjust according to the size of the window?