当文本从一行变为两行时，HTML/CSS 按钮会垂直移动

问题描述 投票：0回答：1

我正在展示我的问题的最简单版本。水平线上有三个按钮。根据它们的状态，它们中的任何一个都可以包含一行或两行文本。第一张图片显示它们仅用一行渲染：

Here they are all with just one line:

当按下按钮时，现在必须显示两行文本，这就是结果：

Problem

按下的按钮不会移动，但正如您所看到的，所有其他按钮都会向下移动。

这是 html：

<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:,">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      <div class="card-grid">
         <p>
         <button class="button-up" id="bUP"><span id="state-up">%STATE_UP%</span></button>
         <button class="button-off" id="bOFF"><span id="state-off">%STATE_OFF%</span></button>
         <button class="button-down" id="bDOWN"><span id="state-down">%STATE_DOWN%</span></button>
         </p>
      </div>
    <script src="script.js"></script>
  </body>
</html>

这是CSS：

html {
  font-family: Arial, Helvetica, sans-serif; 
  text-align: center;
}
h1 {
  font-size: 1.8rem; 
  color: white;
}
body {  
  padding: 25px;
}
.card-grid { 
  max-width: 800px; 
  display: grid;
  gap: 15px; 
  grid-template-columns: auto;
}
button {
   text-align: center;
   font-size: 25px;
   width: 150px;
   height: 150px;
}
.button-up {
   background-color: green;
}
.button-off {
   background-color: red;
 }
 .button-down {
   background-color: green;
 }

我在网上搜索过，没有找到这个问题正在解决。我猜这是因为修复非常简单。但它已经打败了我。

我尝试过各种填充、边距、按钮大小的组合（你可以看到它们很大），但无法摆脱这种效果，即按下一个按钮会影响所有其他按钮的位置。

html css button
1个回答
0
投票

您需要设置按钮的垂直对齐方式。

button {
  vertical-align: middle;
}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.