我想在侧边栏中放置一堆可点击的链接，其悬停效果覆盖了侧栏的整个宽度。这些链接中的一些还包括需要对齐的图像，以便它相对于文本垂直居中。这是我目前有：拉伸<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>标签横过一个侧边栏，同时垂直对齐它的内容到中心

回答

我如何解决它

摘要

相关问题