'How can we align text horizontally using css?

We have some text in vertically align in html output:

Test 1 
Test 2 
Test 3 
Test 4

Now we would like these text horizontally align using css :

Test 1 Test 2 Test 3 Test 4

Is there any way to do this using css ?

Updated :

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


Solution 1:[1]

you can also use display: inline-block to all div inside 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>

Solution 2:[2]

Only use flex:

.container{
  display: flex;
  gap: 20px;
}
<div class="container">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>

Solution 3:[3]

I would personally use flexbox for this:

.horizontal {
    display: flex;
    flex-direction: row; /* this is the default behaviour, so not necessary to write it again */
    justify-content: space-between;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeremy-denis
Solution 2 Arman Ebrahimi
Solution 3

Related Questions