Question

我想使用css来获取从导航栏的每个标签指向下方的箭头。这是我到目前为止所做的。

ul {
   background: rgba(0,0,0,0.3);
   list-style-type: none;
   padding: 0;
   overflow: hidden;
   margin: 0;
}

li {
   float: left;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding: 16px 16px;
   text-decoration: none;
   -webkit-transition:color 0.5s ease-in;
}

li a:visited {
   color: white;
}

li a:hover {
   color: #df9fa2;
}

#menu a:hover:after {
   content: "";
   position: absolute;
   top: 52px;
   width: 0px;
   left: 50%;
   margin-left: -15px;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-top: 15px solid rgba(0,0,0,0.3);
}

<div id="nav">      
    <ul id="menu">
        <li><a class="link" href="#home">Home</a></li>
        <li><a class="link" href="#about">About</a></li>
        <li><a class="link" href="#skills">Skills</a></li>
        <li><a class="link" href="#portfolio">Portfolio</a></li>
        <li style="float:right"><a class="link" href="#contact">Contact</a></li>
    </ul>
</div>

箭头始终显示在导航栏的中间。这是因为left: 50%代码。我认为这样做是因为它从错误的元素中获得了50％，但我不知道如何修复它。任何帮助都会很棒。

Answer 1

定位有时可能有点棘手。您需要定位父（<a>：position: relative;），以便相对于链接计算箭头的位置。

要在条形下设置箭头，您必须使用bottom减去箭头的高度：bottom: -15px;。我必须删除您的overflow:hidden;并在clear:both;标记后放置一个<li>元素，以使其可见，因为<ul>的高度为零，只包含浮动元素

ul {
  background: rgba(0, 0, 0, 0.3);
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: block;
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  -webkit-transition: color 0.5s ease-in;
  position: relative;
}
li a:visited {
  color: white;
}
li a:hover {
  color: #df9fa2;
}
#menu a:hover:after {
  content: "";
  position: absolute;
  bottom: -15px;
  width: 0px;
  left: 50%;
  margin-left: -15px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgba(0, 0, 0, 0.3);
}

<div id="nav">
  <ul id="menu">
    <li><a class="link" href="#home">Home</a>
    </li>
    <li><a class="link" href="#about">About</a>
    </li>
    <li><a class="link" href="#skills">Skills</a>
    </li>
    <li><a class="link" href="#portfolio">Portfolio</a>
    </li>
    <li style="float:right;"><a class="link" href="#contact">Contact</a>
    </li>
    <br style="clear:both;" />
  </ul>
</div>

阅读一些关于CSS定位的例子： http://www.w3schools.com/css/css_positioning.asp

导航栏箭头未显示在每个选项卡CSS下

1 个答案: