Question

由于我将所有指标从像素更改为％，因此我的链接由于某种原因而相互叠加。这是我的代码。我很确定这是一个简单的修复，但我找不到答案。这是代码：

.left_column {
  line-height: 3%;
  float: left;
  padding: 5%;
  width: 10%;
  height: 70%;
  border: solid;
  position: relative;
  top: -11%;
  border: solid;
}
#nav_left_column li {
  display: block;
  font-family: Arial;
}
#nav_left_column a {
  text-decoration: none;
  color: #3e3e3e;
  background-color: #ffffff;
}
#nav_left_column a:hover {
  background-color: #3e5869;
  color: #ffffff;
}
#nav_left_column a:visited {
  color: #357c49;
  background-color: #ffffff;
}

<div class="left_column">
  <ul id="nav_left_column">
    <li><a href="What_s_new.html">What's New</a>
    </li>
    <li><a href="Digital_news.html">Digital News</a>
    </li>
  </ul>
</div>

Answer 1

这一定是罪魁祸首：

line-height: 3%;

因为它使链接的行高等于字体大小的3％而不是高度的3％。简单地摆脱它（或者只是不要将它设置为％，因为你不需要在任何地方使用％）并且它会没问题。

**更新**

由于行高属性是为了增加行之间的空间并且它不起作用，你可以使用它：

#nav_left_column li {
  display: block;
  font-family: Arial;
  margin-top: 10px; /* take care of the links' claustrophobia~ */
}

或者，如果你想让它们之间的空白被链接占用（换句话说，链接是“胖”）：

#nav_left_column li {
  display: block;
  font-family: Arial;
  margin-top: 10px; /* take care of the links' claustrophobia~ */
}

#nav_left_column a {
  text-decoration: none;
  color: #3e3e3e;
  background-color: #ffffff;
  padding-top: 5px;
  padding-bottom: 5px;
}

Answer 2

您的问题是将行高设置为3%。我不知道你为什么会那样做，但那就是堆叠链接，增加价值，或者只删除规则（我的推荐），你的问题应该解决。

在this answer.中查看行高的替代值（或者不要使用百分数。）

Answer 3

您看到的效果很可能是行高和宽度属性的组合。这有效地将容器的可打印区域（div）限制为其父容器高度的3％和父级宽度的10％。

＆＃13;

.left_column {
  --> line-height: 3%;
  float: left;
  padding: 5%;
  --> width: 10%;
  height: 70%;
  border: solid;
  position: relative;
  top: -11%;
  border: solid;
}

＆＃13;

您可以通过删除或更改这两个属性来观察效果。

我的链接在彼此之上

3 个答案: