Question

我在一个div中有四个100 * 100px大小的按钮。但是，根据文本内容的不同，它们的位置也会有所不同。

这是html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Memo demo</title>
  <style>
    button {
      height: 100px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div id="buttonHolder">
    <button type="button" >X</button>
    <button type="button" ></button>
    <button type="button" >X</button>
    <button type="button" >X</button>
  </div>
</body>
</html>

这是在Chrome中呈现的方式：

这是在Firefox上呈现的方式：

我该怎么做才能使它们看起来对齐？

Answer 1

默认情况下，按钮沿其文本的最后一行对齐（“基线”，与inline-block元素相同）。如果没有文本，则使用底部边框，它出现在您的代码段中。要更改此设置，可以使用vertical-align，top，bottom或middle，最适合您的特定情况：

button {
  vertical-align: top;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Memo demo</title>
  <style>
    button {
      height: 100px;
      width: 100px;
    }
  </style>
</head>

<body>
  <div id="buttonHolder">
    <button type="button">X</button>
    <button type="button"></button>
    <button type="button">X</button>
    <button type="button">X</button>
  </div>
</body>

</html>

Answer 2

您可以添加 来保留较小的空格。

OR

您可以使用vertical-align: middle;

button {
  height: 100px;
  width: 100px;
  vertical-align: middle;
}

<div id="buttonHolder">
  <button type="button" >X</button>
  <button type="button" >&nbsp;</button>
  <button type="button" >X</button>
  <button type="button" >X</button>
</div>

Answer 3

您应该尝试使用float property来对齐按钮。

以下是float: left;

的示例

button {
  height: 100px;
  width: 100px;
  float: left;
}

<div id="buttonHolder">
  <button type="button" >X</button>
  <button type="button" ></button>
  <button type="button" >X</button>
  <button type="button" >X</button>
</div>

Answer 4

您可以在display: flex上使用#buttonHolder。它适用于Firefox和Chrome。

#buttonHolder {
  display: flex
}
button {
  height: 100px;
  width: 100px;
}

<div id="buttonHolder">
  <button type="button" >X</button>
  <button type="button" ></button>
  <button type="button" >X</button>
  <button type="button" >X</button>
</div>

由于文本内容，div中的按钮呈现不同的外观

4 个答案: