Css 如何添加到以下每个元素50px

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

它看起来像： [6x][5x][4x][3x][2x][1x][按钮]

我想要实现的是，每个元素的宽度都是前一个元素的宽度，加起来是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;
}

或者，我知道这不是正确的语法。 有没有可能，我是不是想错了，怎么办

这是钢笔：

---

使用css无法做到这一点-最接近于找到n的方法是使用计数器，但你不能使用该计数器太多-看这个，这与你的要求差不多：不是很语义，但你可以这样做：Hi@Pete，谢谢你的快速重播。听起来很糟糕，但你知道怎么解决吗？我添加了pencode链接-fyii如果您只有六个按钮，我建议您使用第n个child手动编码每个按钮，否则您可能需要一些js-或者如果您有服务器端语言，您可以在服务器端进行计算，并将其作为内联样式放在li上

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