如何使一個鏈接，因爲它在CSS中轉換

我有一個網站模板我正在對http://www.travenwest.com/projects/dev2和我有一個擴展框在左邊的問題（這些是我的多個問題之一，至少）。我希望他們成爲其他網頁的鏈接，我想知道是否有一種方法可以將整個盒子從250px擴展到100％。目前，我只是在基本鏈接<a href="http://google.com>Hey</a>中設置了「嘿」，但正如我所說的，我希望整個盒子在鏈接展開時成爲鏈接。此外，我寧願保持它在HTML/CSS，因爲我絕對沒有經驗的jQuery，JavaScript等。謝謝。如何使一個鏈接，因爲它在CSS中轉換

來源

2013-04-28 Nash Read

僅供參考，中心標記在HTML5中不受支持。使用CSS代替：「text-align：center」 – 2013-04-28 21:50:30

謝謝，得到了修復。 – 2013-04-28 21:58:55

只需在CSS添加此

#box a{  
    display:block; 
    width:100%; 
    height:80px; 
    position:relative; 
    z-index:1; 
    line-height: 80px 
}

DEMO：http://jsfiddle.net/enve/fur5D/1/

來源

2013-04-28 21:48:49 Enve

這適用於它的主要部分，但我想要的另一部分是，隨着框的擴展，我希望能夠點擊它的任何部分，而不僅僅是它原來的位置。編輯：如果這甚至可能，這很好，可能不會沒有使用JavaScript或什麼的。 – 2013-04-28 21:52:06

編輯答案。 – Enve 2013-04-28 21:54:43

如果要垂直對齊文字，請使用'line-height：80px' – Enve 2013-04-28 21:56:43

給你的錨標籤以下樣式：

a { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

而且，你不應該使用<center>標籤來定位您的文字鏈接。你應該給你的箱子匹配的class如.box 這種方法你可以瞄準他們都在你的CSS文件，而不必重複相同的CSS多ID的

.box { 
    width: 250px; 
    height: 80px; 
    border-bottom: 3px solid #000000; 
    border-right: 3px solid #000000; 
    transition: width 5s; 
    -webkit-transition: width 2s; 
    text-align: center; 
} 

.box:hover { 
    width: 100%; 
    border: 3px solid #000000; 
}

添加text-align: center;將圍繞你的鏈接不需要額外標記的文本

來源

2013-04-28 21:49:19 Turnip

謝謝，我甚至沒有想到這一點。我對HTML和CSS比較陌生（現在一週左右），所以我感覺自己像個傻瓜，因爲我意識到我可以做的不同事情，哈哈。 – 2013-04-28 21:56:21

如何使一個鏈接，因爲它在CSS中轉換

回答

相關問題