錨定標記內的文本對齊和樣式

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

你只需要從li造型刪除line-height。

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

Answer 2

問題是你已經爲li標籤設置了'line-height'。請記住，line-height會影響該容器內的所有行，而不會影響容器的高度。所以當你添加它時 - 你所擁有的（代碼，名稱）中的每一行都被壓下。

因此，我刪除了line-height。我還從.code中刪除了height:100%，這樣.name就會更接近它，​​併爲.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>