How can we align text horizontally using css?-CodePudding

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 >
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
</div>

CodePudding user response：

you can also use display: inline-block to all div inside container

.horizontal div {
  display: inline-block;
}

<div >
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
</div>

CodePudding user response：

Only use flex:

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

<div >
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>

CodePudding user response：

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;
}