2

I've a button on the right side. If I choose this button, a DIV opens with other elements.

It looks like: [6x][5x][4x][3x][2x][1x][BUTTON]

What I want to achieve is that each element takes the width of the previous one and adds up to 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;
}

The problem here is that the element - ul li a dont get the full height. By adding to the ul li a element a position absolute all are at the same position/place.

So I thought I can use the nth-of-type(x) css statement like:

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

Or somehow like that - I know that this is not the right syntax. Is it possible, am I thinking wrong, how to?

Here is the PEN: https://codepen.io/User-123456789/pen/MOzdLp

Chaaampy
  • 243
  • 1
  • 10
user1357971
  • 63
  • 5
  • 1
    You cannot do this with css - the closest you would come to finding n is using a counter, but you can't use that counter for much - see this, it's pretty much what you are asking: https://stackoverflow.com/questions/43539203/use-css-counter-in-calc – Pete Nov 30 '17 at 15:19
  • Not very semantic but you could do something like this: https://jsfiddle.net/u8m107wk/ – Pete Nov 30 '17 at 15:30
  • Hi @Pete, thanks for your quick replay. Sounds bad but any idea how else to solve it? I added the pencode link - fyi – user1357971 Nov 30 '17 at 15:32
  • If you only have six buttons I would suggest just manually coding each one using nth-child, otherwise you may need a bit of js - or if you have server side language, you could do the calculation server side and put it on the li as inline styles – Pete Dec 01 '17 at 09:37

0 Answers0