Question

我有一个.button类，在活动状态下添加inset box shadow并将line-height增加2以提供按钮效果。但是它旁边的按钮和它下方的文字也向下移动，这是我不想要的。你能否告诉我如何在没有其他任何动静的情况下实现这种效果？

注意：我只希望按钮内的文字在按下按钮时向下移动2px，因此我选择使用line-height。

.button{
  display: inline-block;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  line-height: 38px;
}

<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Answer 1

只需将vertical-align: top;添加到.button个样式。

vertical-align属性的默认值为base-line。当一个按钮被聚焦时，由于其line-height发生变化，.button元素的对齐会受到干扰，因此会压低下面的内容。

＆＃13;

.button{
  display: inline-block;
  vertical-align: top;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  line-height: 38px;
}

＆＃13;

<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

＆＃13;

Answer 2

我建议在按钮不活动时使线高38px并添加透明框阴影（相同高度）。这种处于活动状态的方式不会被移动。

Answer 3

您可以通过转换尝试此操作：

＆＃13;

.button{
  display: inline-block;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  transform:translateY(2px);
}

＆＃13;

<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

＆＃13;

在线高更改时，单击一个按钮时，相邻按钮和按钮下方的文本向下移动

3 个答案: