Question

我有一个看起来像这样的导航：

nav 1 |导航2 | nav 3

有一个顶部和底部边框，每个li都有一个右边的边框来获取管道。

当您将鼠标悬停在每个导航项目上时，项目变为黑色，问题是管道，当您将鼠标悬停在中间或右侧导航项目上时，前一项目中的管道会突出，因为它的父项周围有填充。这种填充在设计中是必需的。

最好的解决方法是什么？

<nav>
  <ul>
    <li class="span4">
    <a href="/">
              <span class="inner">Nav 1</span>
            </a>
        </li>
 //etc...

CSS：

li {
    border-top: 2px solid black;
    border-bottom: 2px solid black;

   a {
      padding: 5px 0;
      &:hover {             
         color: white;
         background-color: black;
      }
      .inner{
         border-right: 2px solid black;
      } 

   }
}

Fiddle

Answer 1

如果没有JSfiddle，我无法确定，但是如果您将列表项设置为inline-block元素，那么有一个奇怪的小怪癖会在HTML标记中创建换行符连续inline-block元素之间的空格。

看看这个CSS-Tricks帖子http://css-tricks.com/fighting-the-space-between-inline-block-elements/，它有一些关于如何删除空格的建议。

更新：我forked your Fiddle并进行了这些更改，因此边框不再突出：

为.inner选择器添加了左边框。

.inner {
    ...
    border-left: 2px solid black;
}

这模拟了前一个元素的右边界，它被a选择器上的-2px左边距覆盖：

a {
    ...
    margin-left: -2px;
    ...
}

此负边距将左边框与前一个列表项的右边框对齐，因此两个边框应显示为在a元素内。

以上更改为第一个列表元素添加了左边框和填充，因此我通过向第一个列表项添加first类并删除-2px左边距并且删除了-2px左边距来否定效果左边框与以下选择器：

.first a {
    margin-left: 0;
}
.first .inner {
    border-left: none;
}

悬停背景颜色更改只是为了显示更好的情况，因为它在黑色背景下看起来有点难。

分割导航的最佳方法是什么？

1 个答案: