Anchor tag in vertical position-CodePudding

Could someone assist me how we can show anchor tag vertically ?

I have anchor tag in div.

<div >
<a href="xxxxxxxxx">Test 1</a>
<a href="xxxxxxxxx">Test 2</a>
<a href="xxxxxxxxx">Test 3</a>
<a href="xxxxxxxxx">Test 4</a>
<a href="xxxxxxxxx">Test 5</a>
<a href="xxxxxxxxx">Test 6</a>
<a href="xxxxxxxxx">Test 7</a>
</div>

It is showing like this :

Test 1 Test 2 Test 3 Test 4 Test 5 Test 6 Test 7

I need this in vertically align using css

Test 1 
Test 2 
Test 3 
Test 4 
Test 5 
Test 6 
Test 7

CodePudding user response：

You could use Mubasher Ali's solution. Or you could make all anchors inside the anchorClass class block-level elements:

.anchorClass a {
  display: block;
}

CodePudding user response：

you can use

.anchorClass {
 display: flex;
 flex-direction: column;
}

CodePudding user response：

no need for Flexbox here. The easiest method is to declare the anchors inside that container as block-level-elements with: display: block

.anchorClass a {
  display: block;
}

<div >
  <a href="xxxxxxxxx">Test 1</a>
  <a href="xxxxxxxxx">Test 2</a>
  <a href="xxxxxxxxx">Test 3</a>
  <a href="xxxxxxxxx">Test 4</a>
  <a href="xxxxxxxxx">Test 5</a>
  <a href="xxxxxxxxx">Test 6</a>
  <a href="xxxxxxxxx">Test 7</a>
</div>