Question

使用this post中的技术，我有一个很好的合理菜单栏。

但是，我想在鼠标悬停时出现的条目之间添加分隔符。

<div id="menu">
    <ul>
        <li>
            Item
        </li>
        <li>
            Menu
        </li>
        <li>
            Link
        </li>
        <li>
            Asdf
        </li>
      </ul>

        <span></span>
</div>

#menu {
    text-align: justify;
    background-color:gray;
    padding:5px;
}

#menu * {
    display: inline;
}

#menu li {
    display: inline-block;
    color:white;
}

#menu ul {
    padding-left:0px;
    margin:0px 100px;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

#menu li:hover {
    color:blue;
    border-left:1px solid black;
    border-right:1px solid black;
}

上述问题是边框不在菜单项之间居中。

这对于javscript肯定是可行的，但我想知道纯CSS是否可行。

Answer 1

这里的问题是你选择的技术无法用元素填充整个空间来进行分配。如果您不必支持IE7或更低版本我建议使用table-cell解决方案，那么border可以按照您想要的方式运行：

#menu li {
    display: table-cell;
    width:1%;
    color:white;
    border:1px solid transparent;
    text-align:center;
    cursor:pointer;
}

选中此Demo

Answer 2

你可以做的一件事就是在你的li中添加填充。

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
}

然后在你的悬停中调用相同的填充，但也

 #menu li:hover {
     color:blue;
     border-left:1px solid black;
     border-right:1px solid black;

 }

问题是它会在其他导航项中产生轻微的抖动。因此，如果您愿意，可以添加-1保证金来修复。这就是我认为你的目标。如果我不正确，请详细说明你的问题。

以下是我收到的输入的编辑。我还包括过渡。

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
    border-left:1px solid rgba(255, 255, 255, 0);
    border-right:1px solid rgba(255, 255, 255, 0);
}

悬停状态

#menu li:hover {
    transition: border-color 0.5s ease;
    color:blue;
    border-left:1px solid rgba(255, 255, 255, 1);
    border-right:1px solid rgba(255, 255, 255, 1);
}

谢谢Dieodius

的jsfiddle http://jsfiddle.net/cornelas/FtVM7/10/

是否可以仅使用CSS在悬停时显示分隔线？

2 个答案: