What is the best way to horizontally align text with CSS?

Question

We have a paragraph of text aligned vertically in an HTML output:

Test 1 
Test 2 
Test 3 
Test 4

However, we now want to align these texts horizontally using some CSS:

Test 1 Test 2 Test 3 Test 4

Is there a CSS solution available for achieving this task?

Update:

<div class="horizontal">
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
</div>

Answer 1

Answer №1

Another option is to apply display: inline-block to all div elements within a specific container.

.horizontal div {
  display: inline-block;
}

<div class="horizontal">
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
</div>

Answer 2

Another option is to apply display: inline-block to all div elements within a specific container.

.horizontal div {
  display: inline-block;
}

<div class="horizontal">
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
</div>

Answer 3

Utilize only the flex property:

.container{
  display: flex;
  gap: 20px;
}

<div class="container">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>

Answer 4

Utilize only the flex property:

.container{
  display: flex;
  gap: 20px;
}

<div class="container">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>

Answer 5

If I were tackling this problem, my go-to solution would be utilizing flexbox:

.horizontal {
    display: flex;
    flex-direction: row; /* The default behavior is already set to 'row' */
    justify-content: space-between;
}

Answer 6

If I were tackling this problem, my go-to solution would be utilizing flexbox:

.horizontal {
    display: flex;
    flex-direction: row; /* The default behavior is already set to 'row' */
    justify-content: space-between;
}