Question

我在右侧有一个按钮。如果我选择此按钮，则会打开包含其他元素的DIV。

看起来像： [6倍] [5倍] [4倍] [3倍] [倍] [1×] [BUTTON]

我想要实现的是每个元素占用前一个元素的宽度，最多可以增加50px。

<details>
<summary>CHA</summary>
    <ul>
        <li><a href="#">ENG</a></li>
        <li><a href="#">FRA</a></li>
        <li><a href="#">ATA</a></li>
        <li><a href="#">AUT</a></li>
        <li><a href="#">BEL</a></li>
        <li><a href="#">BRA</a></li>
    </ul>
</details>

summary {
  position: absolute;
  right: 0;
  top: 0;
}
ul{
  width: 100%;
  right: 50px;
  position: absolute;
}
  ul li {
  float: right;
  margin-left: 1rem;
}
ul li a,
summary {
  color: #fff;
  display: flex;
  width: 50px;
  height: 100%;
  justify-content: center;
  align-items: center;
}

这里的问题是元素 - 尺寸不能达到全高。通过向元素添加元素，绝对位置都位于相同的位置/位置。

所以我认为我可以使用nth-of-type（x）css语句，如：

ul li a:nth-of-type(n){
   right:calc(50px+n)
}

或者以某种方式 - 我知道这不是正确的语法。是不是有可能，我在想错，怎么样？

这是PEN： https://codepen.io/User-123456789/pen/MOzdLp

如何添加到每个后续元素50px

0 个答案: