Question

我有一个可点击的按钮，周围有两个单词，该按钮可在两个单词的样式之间切换（粗体或非粗体）。这是代码：

<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;
}

该按钮可在选项的粗体样式之间进行切换。

但是当我单击它时，由于它是连续的，所以它从它的位置移了一点，并且大胆地将它向前推了一点。

我正在尝试将按钮锁定在位置以及相对于其的单词

如何稳定按钮使其完全不移动？

Answer 1

使用一个类使Option 1的宽度为常数。

.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>

CSS：在行固定位置设置3个项目列表

1 个答案: