划分导航的最佳方法？答案

【问题标题】：Best way to divide up a nav?划分导航的最佳方法？
【发布时间】：2014-04-10 22:37:01
【问题描述】：

我有一个如下所示的导航：

导航 1 |导航 2 |导航 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

【问题讨论】：

这是 CSS LESS 还是 SASS ？也请注明。
当您悬停链接时，唯一改变框大小的元素是右边框。即使在正常状态下，填充仍然存在
需要 JSfiddle。
您是否尝试在 .inner span 元素上添加 box-sizing: border-box？

标签： css less

【解决方案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 左边距和左边框与以下选择器：

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

悬停背景颜色的变化只是为了更好地显示正在发生的事情，因为在黑色背景下有点难以看到。

【讨论】：