1

我正在开发带有分隔符的垂直菜单(仅限 CSS)。为了在悬停时隐藏这些分隔符,我尝试使用边框 + 负边距(取消边框)。但是在 Firefox 上它会创建一个换行符......我该如何解决它?谢谢

http://jsbin.com/akazuf/1/edit(完整尝试输出) 在此处输入图像描述

注意:悬停将为黑色,红色用于测试。

这里没有解决方案:导航分隔符:(

4

1 回答 1

3

如果您根本不想要换行符,则可以添加white-space: pre;#header .nav a样式中。

https://developer.mozilla.org/en-US/docs/CSS/white-space

编辑:更优雅的解决方案可能是切换边框方向(border-leftto border-rightmargin-rightto margin-left

#header .nav a {
    border-right: 2px solid #000000;
    font-family: 'Cuprum',sans-serif;
    font-size: 14px;
    padding: 0 25px;
    text-transform: uppercase;
}

#header .nav .current-menu-item a, #header .nav a:hover {
    background: none repeat scroll 0 0 #FF0000;
    border-left: 2px solid #000000;
    color: #FFFFFF;
    margin-left: -2px;
    padding: 14px 25px;
    text-decoration: none;
}
于 2012-11-28T14:12:28.183 回答