CSS: Set 3 items list in row fixed position

user_10190500 0
Viewed 63

I have a clickable button surrounded by two words, the button switching between the style of the words (bold or not). this is the code:

<div class="wrapper">
  <ul class="selectorContainer">
    <li class="option1">
      <span>Option 1</span>
    </li>
    <li class="arrowCtn"> 
      <button class="arrowsImgBtn" (click)="somefunc()">
        <img src="../../assets/images/arrow.png">
      </button> 
    </li>
    <li class="option2">
      <span>Option 2</span> 
    </li>
  </ul>
</div>

CSS:

.wrapper {
    display:block;
    width: 100%;
}

.selectorContainer{
    display: flex;
    flex-flow: row;
    font-size: 1.5em;
    background: #f9f9f8;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    padding-left: 0;
    min-height: 74px;
}

THe button is toggle between style bold of the options..

But when I click on it, it moves from it's position a bit since it's a row and the boldness is pushing it a bit forward..

I'm trying to make the button locked in the position and the words to be relative to it

How can I stabilize the button to not move at all from it's position?

css
1 Answers

Use a class to make Option 1 width a constant value. 

.wrapper {
    display:block;
    width: 100%;
}

.selectorContainer{
    display: flex;
    flex-flow: row;
    font-size: 1.5em;
    background: #f9f9f8;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    padding-left: 0;
    min-height: 74px;
}

.placeholder {
  display:block;
  width: 90px;
}
<div class="wrapper">
  <ul class="selectorContainer">
    <li class="option1">
      <span class="placeholder">Option 1</span>
    </li>
    <li class="arrowCtn"> 
      <button class="arrowsImgBtn" (click)="somefunc()">
        <img src="../../assets/images/arrow.png">
      </button> 
    </li>
    <li class="option2">
      <span>Option 2</span> 
    </li>
  </ul>
</div>

user_104562350
Related