列表导航中的垂直对齐伪元素

Posted 2023-03-05

【中文标题】列表导航中的垂直对齐伪元素

【英文标题】：vertical align pseudo element in list navigation

【发布时间】：2013-01-28 11:27:14

【问题描述】：

我创建了一个列表样式导航，每个超链接可以是多行，在每个超链接元素之后我添加了一个伪元素'箭头'，是否可以垂直对齐伪元素而不管超链接高度如何？

要求它在 IE8 及更高版本中工作。

标记：

<ul>
<li>
   <a href="#">
      <h3 class="title">Cover</h3>
      <p class="subtitle">Lorem ipsum dolor sit</p>
    </a>
</li>
<li class="current">
   <a href="#">
      <h3 class="title">Lorem ipsum dolor sit amet</h3>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores cum!</p>
   </a>
</li>
<li>
   <a href="#">
      <h3 class="title">Lorem ipsum dolor sit amet, consectetur</h3>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis.</p>
   </a>
</li>
<li>
   <a href="#">
      <h3 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit.</h3>
   </a>
</li>
</ul>

CSS：

body 
    background: #666;
    padding: 5em;

ul 
    background: #fff;

    list-style: none;

li 
    border-bottom: 1px solid #ccc;
    position relative;

.current a 
    border-color: #000;

a 
    border-left: 8px solid #ccc;
    overflow: hidden;
    display: block;
    line-height: 1.3;
    padding: .75em;
    position: relative;
    text-decoration: none;
    color: #000;

a:after 
    content: '>';
    color: #ce4300;
    float: right;
    font-size: 1.125em;
    line-height: 1;
    position: absolute;
    right: 1em;

h3 
    float: left;
    font-size: .875em;
    margin: 0 1em 0 0;

.subtitle 
    color: #555;
    clear: left;
    float: left;
    font-size: .875em;
    font-style: itatlic;

当前原型： http://jsfiddle.net/yVJbL/

【参考方案1】：

给你：

a:after 
    content:'>';
    color: #ce4300;
    font-size: 1.125em;
    position: absolute;
    line-height: 0;
    right: 1em;
    top: 50%;
    bottom: 50%;

出乎意料的简单：D

【讨论】：

我知道 IE8 有这个解决方案......其他人可以工作，对吧。

适用于所有浏览器，除了我认为的早期版本的 IE。在所有浏览器的最新版本中测试，似乎没有问题。

这很好，会记住的 :-) 每个人都在学习，你知道的。从我这里开始。

我不知道你能做到这一点，直到我玩了你的小提琴。 :D 真的很简单。一定要记住这一点。

是的...将 line-height 设置为 0 是我从未尝试过的。每次，我都使用如下属性：高度：20px；边距顶部：-10px；最高：50%； - 但你知道，负边距真的不是一个明确的解决方案:-)

【参考方案2】：

我认为让所有浏览器都满意的最佳解决方案是使用背景图像（这个小箭头不会是那么大的图像）和背景位置：右中心（左右）。您也可以使用此解决方案进行悬停效果。背景图片也可以放在padding区，不会溢出。

希望对你有所帮助。

【讨论】：

感谢您的输入，但我更喜欢非图像解决方案，因为箭头颜色/大小会根据上下文而变化。 plus 在视网膜分辨率下也可以正常工作。

啊，当然...改变颜色应该不是问题，分辨率不确定。 display:table 可以解决这个问题，但是我确定 IE7 不支持它，我不确定是否支持 IE8。如果显示：表格，您可以设置垂直对齐。最后，非常不直接的解决方案可能是使用很少的 JS 支持（理解这不是很好的解决方案）。会尝试更多地思考它，也许会发现一些东西。