悬停期间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对齐不正确

回答

相关问题