Question

我在（.redTabActive :: after）上的类上使用伪选择器，而Im试图将带有边框的下克拉的左边距设置为50％，而不是50％宽度，它使用的是父元素，a并在屏幕上显示在td中间左侧所有选项卡的屏幕上。

<td>
   <a class="redTab">Tab 1</a>
   <a class="redTab">Tab 2</a>
   <a class="redTab">Tab 3</a>
   <a class="redTab">Tab 4</a>
   <a class="redTab">Tab 5</a>
   <a class="redTab">Tab 6</a>
</td>

.redTabActive::after{
    content: '';
    border: 15px solid transparent;
    border-top: 15px solid black;
    margin-left: -50%;
    margin-top: 25px;
    vertical-align: bottom;
    overflow: visible;
    position: absolute;
}

我有一些JavaScript，当您单击它时，可以将类从redTab更改为redTabActive。这是我希望将下克拉放置在选项卡中间的位置，但是对于大多数选项卡，它都显示在屏幕外。

Answer 1

我的评论中的一个可能的示例“正在等待某种反馈）所以位置是从此开始，然后您可以选择边距，变换和或协调。

.redTab::after {
  content: "";
  border: 15px solid transparent;
  border-top: 15px solid black;
  display: table;/* or any block level display or use top:xx; */
  border-collapse: collapse;/* if table display*/
  left: 50%;
  margin-left: -15px;
  position: absolute;
}
a {
  position: relative;/* i'm your father ! */
  display: inline-block;
  border: solid;/* see me */
}

<table>
  <tr>
    <td>
      <a class="redTab">Tab 1</a>
      <a class="redTab">Tab 2</a>
      <a class="redTab">Tab 3</a>
      <a class="redTab">Tab 4</a>
      <a class="redTab">Tab 5</a>
      <a class="redTab">Tab 6 last one</a>
    </td>
  </tr>
</table>

或

.redTab::after {
  content: "";
  border: 15px solid transparent;
  border-top: 15px solid black;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  position: absolute;
}

a {
  position: relative; /* i'm your father ! */
  display: inline-block;
  border: solid;/* see me */
}

<table>
  <tr>
    <td>
      <a class="redTab">Tab 1</a>
      <a class="redTab">Tab 2</a>
      <a class="redTab">Tab 3</a>
      <a class="redTab">Tab 4</a>
      <a class="redTab">Tab 5</a>
      <a class="redTab">Tab 6 last one</a>
    </td>
  </tr>
</table>

或

.redTab::after {
  content: "";
  border: 15px solid transparent;
  border-top: 15px solid black;
  top: 100%;
  left: 50%;
  transform: translatex(-50%);
  position: absolute;
}

a {
  position: relative;
  /* i'm your father ! */
  display: inline-block;
  border: solid; /* see me */
}

<table>
  <tr>
    <td>
      <a class="redTab">Tab 1</a>
      <a class="redTab">Tab 2</a>
      <a class="redTab">Tab 3</a>
      <a class="redTab">Tab 4</a>
      <a class="redTab">Tab 5</a>
      <a class="redTab">Tab 6 last one</a>
    </td>
  </tr>
</table>

这些示例中的任何一个都从position:relative设置到父级开始，该父级旨在作为该视觉定位的参考。

:: after伪使用父级宽度而不是元素宽度进行基于百分比的定位

1 个答案: