Warum sind meine Links in HTML aufeinander gestapelt?

Question

Ich möchte eine Website haben, auf der die Links zu verschiedenen Webseiten vertikal über einem Bild angeordnet sind, aber aus irgendeinem Grund sind sie sogar übereinander gestapelt obwohl ich eine <br> dazwischen haben.

.image-wrapper { 
 
    position: absolute; 
 
    width: 250px; 
 
} 
 
.image-wrapper a { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 20px; 
 
    border: 0; 
 
    width: 98px; 
 
    height: 30px; 
 
    color: #FFF; 
 
    margin: 0px; 
 
    text-decoration: none; 
 
    font-family: "Abel"; 
 
    font-size: 160%; 
 
}

<div class="image-wrapper"> 
 
    <img src="side bar.png" alt="sometext" /> 
 
    <a href="harsh_projects.html"> Projects </a> 
 
    <br> 
 
    <a href="harsh_resume.html"> Resume </a> 
 
    <br> 
 
    <a href="harsh_contact.html"> Contact Me </a> 
 
</div>

Answer 1

entfernen auf Links, um Ihre Breite/Höhe sein, wickeln Sie sie in Behälter (.container_for_links), fügen Sie Stile, die Sie auf einem Elemente zu diesem Container haben dann dieses Add Code:

.container_for_links a{ 
    display:block; 
} 

https://jsfiddle.net/ty1u08kt/2/

Answer 2

Mit position:absolute; Sie alle diese Elemente sind anweist an der gleichen Stelle top:0; left:0; mit platziert werden.

Wie wäre es, die Links in ein anderes Element zu integrieren und es absolut zu positionieren.

<div class="image-wrapper"> 
    <img src="side bar.png" alt="sometext" /> 
    <div class="links"> 
     <a href="harsh_projects.html"> Projects </a> 
     <br> 
     <a href="harsh_resume.html"> Resume </a> 
     <br> 
     <a href="harsh_contact.html"> Contact Me </a> 
    </div> 
    </div> 

Dann aktualisieren Sie Ihren .image-wrapper a Selektor .image-wrapper .links