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

Is there a way to prevent the contents of my div from overflowing beyond my other div?

Feeling trapped during the process of setting up a intricate jQuery Image Slider

Dynamic Data Binding in Ionic 2

Can the text value be read and its strings changed?

Can Angular Flex support multiple sticky columns at once?

Changing the color of a placeholder using Javascript: A step-by-step guide

The resizing issue of Textarea during transitions

Extract data using PHP regular expressions

Modify dates on constant URL and run the link

Ensuring the bootstrap footer remains anchored at the bottom of the page content

Ensure equal width for an HTML element by matching it with the dimensions

Rejuvenate your Bootstrap Accordion with these Settings

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place

Having trouble parsing emails in Python using the "imaplib" library, dealing with HTML line character limits, and handling extra non-Unicode characters

Different ways to swap table cells using only CSS

Restrict User File Uploads in PHP

What is the best way to replicate floats using flexbox?

Enhance the speed of webview on Android devices

Hexagonal Shape with Rotating Border Gradient in CSS

The hover drop-down menu in CSS is not appearing in the correct position