1

我想在导航中悬停项目的左侧和右侧添加边框。这可行,但是看到我向元素添加了 2px,它会将其他元素推出。如何将边框添加到几乎位于悬停列表项的内部而不影响导航的其余部分?

 // Simple example:
 li {
     list-style: none;
     display: inline;
 }

 li a:hover {
     border-left: 1px solid black;
     border-right: 1px solid black;
 }

 // HTML:
 <ul>
     <li><a href="">Test 1</a></li>
     <li><a href="">Test 2</a></li>
     <li><a href="">Test 2</a></li>
 </ul>

或访问jsfiddle 链接以获取活动示例。

4

2 回答 2

4

a我会为您的标签添加透明边框:

li a {
    border: 1px transparent solid;
    border-width: 0 1px;
}

http://jsfiddle.net/dfsq/95ZUw/1/

于 2013-02-15T12:15:29.223 回答
2

不是最好的解决方案,但是...添加 1px 填充,然后在触发悬停时将其删除。在您的情况下可以这样做吗?

li {
list-style: none;
display: inline;
}

li > a { padding:0 1px; }

li a:hover {
border-left: 1px solid black;
border-right: 1px solid black;
padding:0;
}
于 2013-02-15T12:18:03.537 回答