我想在側邊欄中放置一堆可點擊的鏈接，其懸停效果覆蓋了側欄的整個寬度。這些鏈接中的一些還包括需要對齊的圖像，以便它相對於文本垂直居中。這是我目前有：拉伸<a>標籤橫過一個側邊欄，同時垂直對齊它的內容到中心

Screenshot

正如你所看到的，懸停效果和<a>標籤不包括側邊欄的整個寬度呢。這是壞的，因爲big link targets are easier to click。我試着修改水平拉伸的基於CSS的表格單元格，但是文本部分沒有保持正確對齊。

什麼是正確的方法來做到這一點？〜我可以張貼我目前的HTML，如果它是有用的，但我正打算重寫基於這個答案的解決方案反正我的標記〜

編輯：這裏是有關的HTML代碼段。

<nav id="sidebar"> 
    <ul> 
     <li><a href="/">Home</a></li> 
    </ul> 

    <header>Recently Added</header> 
    <ul id="recents"> 
     <li><a href="/play/q2music/"><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></a></li> 
     <li><a href="/play/moclassic/"><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></a></li> 
     <li><a href="/play/pitrios/"><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></a></li> 
    </ul> 
</nav>

來源

2014-11-22 Pieter

請分享一些代碼。 – 2014-11-22 17:03:02

查看更新後的帖子。 – Pieter 2014-11-22 19:10:58

你試過position: absolute; width: 100%（或類似的東西）在你的鏈接上？這應該使它成爲家長的全部寬度。

來源

2014-11-22 17:02:29

把display: block;放在相關鏈接上應該使它們全長。或者如果沒有，display: block; width: 100%;。 width: 100%本身似乎對內聯元素沒有多大用處。

...和一些定位以固定對齊，例如，

ul li a { 
    display:block; 
    text-decoration:none; 
    position:relative; 
} 
ul li a span { 
    position:absolute; 
    top:50%; 
}

來源

2014-11-22 17:31:52 Keelan

是的，我的答案只是一個快速的想法，只是測試它，它不工作 – 2014-11-22 17:37:34

我以前試過，但打破了圖像的垂直對齊：http：//i.imgur。com/ihs769H.png – Pieter 2014-11-22 19:07:34

@Pieter ... oops。是的，它會這樣做。一些定位在CSS應該修復它。給我的原答案增加了一個例子。 – Keelan 2014-11-22 21:33:52

我如何解決它

首先我做了我<a>標籤呈現爲一個行CSS表格將它們設置爲display: table及其子女display: table-cell。您需要將width: 100%添加到表格標籤以使其水平拉伸。但隨後的文本沒有正確對齊：

Screenshot

添加width: 100%到<span>包含文本的伎倆：

Screenshot

嗯哦... 5個像素左填充我的鏈接導致右邊的溢出。修復相當簡單：將鏈接標記包裝在另一個<span>標記中，並調整CSS display規則，以便新的<span>呈現爲表格。巴姆！

Screenshot

摘要

我準備爲未來的讀者的利益而minimally working HTML5-compliant example。

來源

2014-11-23 09:17:57 Pieter

拉伸<a>標籤橫過一個側邊欄，同時垂直對齊它的內容到中心

回答

我如何解決它

摘要

相關問題