Выравнивание и стилизация текста внутри тега привязки

Question

У меня есть список ссылок, которые я хочу сложить один поверх другого для структуры навигации. Вот мой HTML:

<nav> 
    <ul> 
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a></li> 
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a></li> 
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a></li> 
    </ul> 
</nav> 

Каждый элемент списка должен быть квадратом, и все они должны совпадать по вертикали. Текст внутри каждого квадрата должен иметь номер (1) крупным шрифтом с именем (одним) непосредственно под ним.

Но по какой-то причине имя подталкивается ниже, в следующий тег привязки.

Вы можете увидеть, что я здесь: http://jsfiddle.net/pmb6pqea/

Каждый знает, как я могу решить эту проблему?

Answer 1

Вам просто нужно удалить line-height из вашего li стиля.

http://jsfiddle.net/pmb6pqea/4/

Answer 2

Проблема в том, что вы установили 'line-height' для тега li. помните, что высота линии будет влиять на все строки внутри этого контейнера, а не на высоту контейнера. Поэтому, когда вы добавили ее, каждая строка внутри двух из них (код, имя) будет нажата вниз.

Итак, я удалил line-height. Я также удалил height:100% с .code, чтобы имя .name приблизилось к нему и установило padding-top для .code, чтобы нажимать оба на центр.

nav { 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    position: fixed; 
 
    width: 150px; 
 
    color: #000000; 
 
    border-right: solid 2px #000000; 
 
    background-color: #FFFFFF; 
 
} 
 
nav ul, 
 
nav ul li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav ul li { 
 
    height: 150px; 
 
    border-bottom: solid 2px #000000; 
 
} 
 
nav ul li a:link, 
 
nav ul li a:hover, 
 
nav ul li a:visited { 
 
    display: block; 
 
    color: #000000; 
 
    text-decoration: none; 
 
    width: 150px; 
 
} 
 
nav ul li a span.code { 
 
    padding-top: 15px; 
 
    display: inline-block; 
 
    font-size: 72px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
nav ul li a span.name { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    width: 100%; 
 
    height: 40px; 
 
    text-align: center; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a> 
 
    </li> 
 
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a> 
 
    </li> 
 
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a> 
 
    </li> 
 
    </ul> 
 
</nav>