Question

我希望有一个网站，其中不同网页的链接垂直排列在图像的顶部，但由于某种原因，它们堆叠在一起，即使我们之间有<br>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用position:absolute;，您正在指示使用top:0; left:0;将所有这些元素放置在同一位置。

如何将链接包装在另一个元素中并将其绝对定位。

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

然后将您的.image-wrapper a选择器更新为.image-wrapper .links

Answer 2

删除链接上的宽度/高度，将它们包装在容器（.container_for_links）中，将元素上的样式添加到该容器中，然后添加以下代码：

.container_for_links a{
  display:block;
}

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

为什么我的链接在HTML中叠加在一起

2 个答案: