垂直中心僞元素CSS是一個高度'獨立'的箭頭

我試圖讓一個CSS箭頭僞元素垂直對齊每個列表項目，無論項目的高度。這是一個下拉菜單，有些項目可能比一行更長。我希望有一個只有css的方法，但也不是基於不同的固定高度（如果列表項目的長度爲3行，我希望它可以工作，我已經在下面包含了一個完整的jsbin。）垂直中心僞元素CSS是一個高度'獨立'的箭頭

這裏是現在正在發生的事情（上排）和我所試圖實現（下）：

http://f.cl.ly/items/0p02081n2E1J2j2U193q/navhelp.gif

同樣，使用固定的邊距值，我可以得到單個或多個線項目是但我不能同時得到這兩個，我試圖避免使用多個類，如果可以的話，因爲我必須爲每個不同的尺寸創建一個可能的類型

http://jsbin.com/eqilok/17/edit

我會感謝您的幫助！非常感謝。

來源

2012-10-26 Jonas

這裏：http://jsbin.com/eqilok/20/edit

.dropdown .levelonelink { position: relative; } /* added */ 

.dropdown .levelonelink:hover:after { 
    content: " "; 
    border-color: transparent transparent transparent purple; 
    border-style: solid; 
    border-width: 16px; 
    height:0; 
    width:0; 
    /* margin-top:-32px; removed */ 
    /* right:-32px; removed */ 
    position: absolute; 
    right: -32px; /* added */ 
    top: 50%; /* added */ 
    margin-top: -16px; /* added */ 
}

這工作，因爲我們知道箭頭（32PX）的高度。因此，通過給列表項目一個位置來允許它完全與列表項目相對定位，然後將每個li的高度的50％放置在頂部。現在箭頭的頂端在lis的垂直中心，但這太低了。所以把它們拉高一半 - 16px。

來源

2012-10-26 18:42:41 tuff

哇，現在看起來如此明顯。非常感謝凝灰岩！ – Jonas

作爲後續行動，是否有可能將子div（在列表項中）定位在下拉高度？我認爲'.dropdown'的位置相對和絕對增加不允許語義兒童以這種方式正確定位？ [圖]（http://f.cl.ly/items/3u0v0q392H2f1P370C2s/navhelp2.gif）下面是[jsbin]（http://jsbin.com/eqilok/22/edit） – Jonas

這是正確的，你不能因爲在祖先元素上的定位。你需要用JS把它放在菜單的頂部，或者改變你的設計。 – tuff

垂直中心僞元素CSS是一個高度'獨立'的箭頭

回答

相關問題