CODEWITHSUNDEEP
htmlcss
Ashu
Ashu

Reputation: 93

Anchor tag in vertical position

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

I have anchor tag in div.

<div class="anchorClass">
<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

Upvotes: 0

Views: 794

Answers (3)

metatron
metatron

Reputation: 999

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

.anchorClass a {
  display: block;
}

Upvotes: 1

tacoshy
tacoshy

Reputation: 13002

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 class="anchorClass">
  <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>

Upvotes: -1

Mubasher Ali
Mubasher Ali

Reputation: 542

you can use

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

Upvotes: 1

Related Questions