我的鏈接在彼此之上

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％。簡單地擺脫它（或者只是不要將它設置爲％，因爲你不需要在任何地方使用％），並且沒問題。

---

**更新**

由於line-height屬性在那裏，以增加線之間的空間，它不工作，你可以使用這個：

#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％。

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

您可以通過刪除或改變這兩個屬性觀察效果。