Question

我正在创建一个简单的水平导航。我遇到的麻烦就是当我向＆＃34;活跃＆＃34;添加css三角形时。使用<after>伪元素的页面，该项目的整体<li>高度正在增加，这会抛出整个栏。

我确定我只是忽略了某些事情，但我已经尝试过对其进行故障排除，解决方案正在逃避我。任何帮助将非常感谢！

这是一个codepen：http://codepen.io/joshmath/pen/HiBvd

Answer 1

:after元素在相对定位时占用空间，因此您可以做两件事。

1）设置<li>：

的高度

nav ul {
  li {
    height: 1em; // 1em == the height of one line of text
    overflow: visible; // not required, but good to have
  }
}

2）绝对定位伪元素（我通常这样做）

nav ul {
  li.current {
    position: relative;
    &:after {
      position: absolute;
      top: 100%; // align the top of the pseudo element with the bottom of li.current
      left: 50%; // center
      margin-left: -6px; // half the width of the pseudo element to correct the center

      // your styles:
      content: '';
      width: 0px; 
      height: 0px; 
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;              
      border-top: 6px solid #3ad2bc;
    }
  }
}

Answer 2

您只需要添加一个相对于您的菜单项的位置，然后将其定位为绝对位置，然后它不会影响您的身高。

下面的代码段

 nav ul li.current{
   position:relative;
    a{
      color: #3ad2bc;
    }
    &:after{  //colored triangle
      content: '';
      width: 0px; 
      height: 0px; 
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;      
      border-top: 6px solid #3ad2bc;
      margin-left: 0;
      position:absolute;
      bottom: -10px;
      left:50%;
      margin-left:-12px;
    }
  }

Answer 3

检查codePen 我加了一个

position: relative;
text-align: center;

在li属性中，并且在伪元素中添加绝对位置

添加伪元素时，水平导航栏上的高度会变得混乱

3 个答案: