列表導航中的垂直對齊僞元素

我創建了列表樣式導航，並且每個超鏈接都可以是多行，在每個超鏈接元素之後我添加了僞元素「箭頭」後，是否可以將僞元素垂直對齊不管超鏈接的高度如何？列表導航中的垂直對齊僞元素

要求將這個工作在IE8 &以上。

的Mark-起來：

<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/

來源

2013-02-13 calebo

在這裏你去：

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

出奇的簡單：d

來源

2013-02-13 02:13:22

我知道這個解決方案的IE8 ...其他人可以工作，沒錯。 – tomis 2013-02-13 02:16:56

適用於除IE早期版本之外的所有瀏覽器。測試所有瀏覽器的最新版本，它似乎沒有問題。 – 2013-02-13 02:21:28

比它好，會記住:-)每個人都在學習，你知道的。從我身上放下。 – tomis 2013-02-13 02:23:08

我的事情讓所有的瀏覽器幸福最好的解決辦法是使用背景 - 圖像（這個小箭頭不會是如此大的圖像）和背景位置：右中心（或左右）。您也可以使用此解決方案來緩解問題。背景圖像也可以放置在填充區域，所以不會有任何溢出。

希望這可以幫助你。

來源

2013-02-13 01:56:19 tomis

感謝您的輸入，但我寧願一個非圖像解決方案，因爲，箭頭顏色/大小將取決於具體的環境而改變。加在視網膜分辨率下也可以正常工作。 – calebo 2013-02-13 01:59:22

啊，當然...改變顏色不應該是問題，分辨率不確定。顯示：表可以解決這個問題，但我確定它不支持IE7，我不確定支持IE8。如果顯示：表格，您可以設置垂直對齊。最後，相當不直接的解決方案可以使用少量的JS支持（理解這不是很好的解決方案）。會嘗試更多地思考它，也許會找到一些東西。 – tomis 2013-02-13 02:05:03

列表導航中的垂直對齊僞元素

回答

相關問題