Question

我尝试添加一个小三角形作为我的导航栏列表项下的当前页面指示符，其中包含类＆＃34;活动＆＃34;使用:: after。

然而，

由于长度差异，三角形的对齐可能不是所有列表项的中心。
网站应该有回应。当我调整窗口屏幕的大小时，列表项会被压缩并放大列表的宽度。同样，由于列表项的长度差异，如果三角形在＆＃34; :: after＆＃34;之后的短列表项下，则将覆盖部分三角形。忽略填充空间。

以下是代码段：

＆＃13;

nav {
  display: block;
}

ul {
  display: table;
  text-align: center;
  background-color: red;
  margin-bottom: 5%;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

li {
  display: table-cell;
  float: none;
  padding: 5px 0;
  vertical-align: middle;
  position: relative
}

li.active::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 40%;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: red transparent transparent transparent;
}

＆＃13;

<nav>
  <ul>
    <li>xxxxxxxxxxxxxxxxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li class="active">xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</nav>

＆＃13;

有没有解决方案？

Answer 1

将right: 40%中的li.active:after替换为：

bottom: 0; /* aligns to the bottom*/
right: 50%;
transform: translate(50%, 100%); /* centering */

见下面的演示：

＆＃13;

nav {
  display: block;
}

ul {
  display: table;
  text-align: center;
  background-color: red;
  margin-bottom: 5%;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

li {
  display: table-cell;
  float: none;
  padding: 5px 0;
  vertical-align: middle;
  position: relative
}

li.active::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  transform: translate(50%, 100%);
  right: 50%;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: red transparent transparent transparent;
}

＆＃13;

<nav>
  <ul>
    <li>xxxxxxxxxxxxxxxxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li class="active">xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xxxx</li>
  </ul>
</nav>

＆＃13;

Answer 2

你快到了。

您可以在CSS中使用calc()来解决水平位置问题。 It's worth looking at the CanIUse data for this检查其支持情况。

你可以用它来计算箭头的位置，假设你想要它在中心的事实，你可以减去50％的箭头宽度的一半;

left: calc(50% - 10px)

然后，您只需要在bottom位置属性上设置否定位置，即可将箭头置于列表元素下方。

bottom: -15px;

这是一个有效的代码段;

nav{
    display: block;
}

ul{
    display: table;
    text-align: center;
    background-color: red;
    margin-bottom: 5%;
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

li{    
    display: table-cell;
    float: none;
    padding: 5px 0;
    vertical-align: middle;
    position: relative
}

li.active::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: calc(50% - 10px);
      bottom: -15px;
      border-style: solid;
      border-width: 15px 10px 0 10px;
      border-color: red transparent transparent transparent;
}

<nav>
<ul>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxx</li> 
<li>xxxx</li> 
<li class="active">xxxx</li> 
<li>xxxx</li> 
<li>xxxx</li> 
<li>xxxx</li> 
</ul>
</nav>

在填充空间外显示:: after伪元素并水平居中

2 个答案: