Question

我试图用css按钮做某事，但是当用户按下按钮时，兄弟按钮会移动一点。

由于边界半径，我无法使用轮廓。

任何想法如何解决这个问题？

一个例子：

＆＃13;

.main-body {
  background-color: gray;
  width: 50vw;
  height: 50vw;
  text-align: center;
  margin: auto;
}

.button {
  border-radius: 20px;
  border-style: solid;
  border-color: red;
  border-width: 0 2vw 2vw 0;
  font-size: large;
  margin: 4%;
  width: 40%;
  height: 40%;
  transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s;
}

.button:focus {
  outline: 0;
}

.button:active {
  border-width: 0;
  width: calc(40% - 2vw);
  height: calc(40% - 2vw);
  margin-top: calc(4% + 2vw);
  margin-left: calc(4% + 2vw);
}

＆＃13;

<body>
  <div class="main-body">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button class="button">4</button>
  </div>
</body>

＆＃13;

Answer 1

将vertical-align: bottom;添加到.button

＆＃13;

.main-body {
  background-color: gray;
  width: 50vw;
  height: 50vw;
  text-align: center;
  margin: auto;
}

.button {
  vertical-align: bottom; /* now bottoms will align so no buttons will move */
  border-radius: 20px;
  border-style: solid;
  border-color: red;
  border-width: 0 2vw 2vw 0;
  font-size: large;
  margin: 4%;
  width: 40%;
  height: 40%;
  transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s;
}

.button:focus {
  outline: 0;
}

.button:active {
  border-width: 0;
  width: calc(40% - 2vw);
  height: calc(40% - 2vw);
  margin-top: calc(4% + 2vw);
  margin-left: calc(4% + 2vw);
}

＆＃13;

<body>
  <div class="main-body">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button class="button">4</button>
  </div>
</body>

＆＃13;

Answer 2

尝试以下代码，更改

 .button:active { 
    margin-top: calc(4% + 2vw);
  }

到

  .button:active { 
     top: calc(4% + 2vw);
  }

.main-body {
  background-color: gray;
  width: 50vw;
  height: 50vw;
  text-align: center;
  margin: auto;
}

.button {
  border-radius: 20px;
  border-style: solid;
  border-color: red;
  border-width: 0 2vw 2vw 0;
  font-size: large;
  margin: 4%;
  width: 40%;
  height: 40%;
  transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s;
}

.button:focus {
  outline: 0;
}

.button:active {
  border-width: 0;
  width: calc(40% - 2vw);
  height: calc(40% - 2vw);
  top: calc(4% + 2vw);
  margin-left: calc(4% + 2vw);
  
}

<body>
  <div class="main-body">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button class="button">4</button>
  </div>
</body>

在不移动兄弟姐妹的情况下更改一个元素的边框宽度

2 个答案: