懸停期間HTML對齊不正確

我在網頁上有一個菜單，我想在鼠標懸停的元素上添加一些突出顯示。在我懸停鼠標之前，菜單看起來不錯，對齊看起來不錯。爲了添加emphsis，我添加了一個小箭頭（或'>'符號）。問題是現在文本向右跳了2個字符。懸停期間HTML對齊不正確

我想添加'>'字符，但沒有我的菜單文本跳到右側。正確的行爲是文本保持在花邊中，箭頭在懸停的菜單項左側顯示2個空格。

注意我試圖改變我的路線，整個事情看起來像廢話。只有text-align: left才能正確對齊。

#leftMenu { 
    position: absolute; 
    top:28%; 
    left:24%; 
    height: 20%; 
    width: 20%; 
    font-weight:400 
    font-size:0.5em; 
} 

#leftMenu a:hover:before { 
    content: "> "; 
}

如何添加沒有文字跳到右側的箭頭？

來源

2012-02-17 codingJoe

只要「>」已經存在，只是不可見。這樣它將佔用菜單上的房地產，所以當它出現時什麼也不會移動。這裏是一個小例子：

CSS：

#leftMenu { 
    position: absolute; 
    top:28%; 
    left:24%; 
    height: 20%; 
    width: 20%; 
    font-weight:400; 
    font-size:0.5em; 
} 

.marker{ 
    visibility:hidden; 
} 

#leftMenu li:hover .marker{ 
    visibility:visible; 
} 

#leftMenu ul{ 
    list-style:none; 
}

HTML：

<div id="leftMenu"> 
    <ul> 
    <li><span class="marker">&gt;</span><a href="#">Link 1</a></li> 
    <li><span class="marker">&gt;</span><a href="#">Link 2</a></li> 
    <li><span class="marker">&gt;</span><a href="#">Link 3</a></li> 
    </ul> 
</div>

我真的不知道你的菜單的確切佈局，但我覺得整個上面得到大概的概念。

來源

2012-02-17 05:35:41 Zensar

爲什麼它會在'>'字符和'Link 1'之間換行？如何阻止它在那裏放置換行符？ – codingJoe 2012-02-22 01:17:40

您可以爲普通條目添加填充左邊的內容，該內容需要稍後使用箭頭的寬度，然後在支持箭頭時進行移除。

但是，這可能會相當混亂，因爲箭頭在每個瀏覽器中的寬度可能不一樣（即使使用相同的字體和字體大小）。

另一種可能性是使用定位屬性將箭頭移動到正確的位置。如果您例如使用position: absolute;，它將不再移動其他東西。請注意，它將完全置於沒有標準位置的下一個父級（靜態）中。

來源

2012-02-17 05:04:34 s1lence

懸停期間HTML對齊不正確

回答

相關問題