Мои ссылки друг на друга

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% от высоты. Просто избавитесь от него (или просто не устанавливайте его на%, потому что вам не нужно использовать% везде), и все будет хорошо.

---

** UPDATE **

Поскольку свойство высота линии было увеличить пространство между линиями, и это не работает, вы можете использовать это:

#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; 
 
}

Вы можете наблюдать эффект путем удаления или изменения этих двух свойств.