Question

我有一些带有文字的按钮方形按钮。当文本在按钮中变得太长时，它会自动在第二行继续。大。但是，按钮也会向下移动一点，并且不再与其他按钮垂直对齐。按钮内的文字越多，按钮移动的位置就越远。

为什么会发生这种情况，显然：我该如何解决？

重要的html：

<button class="squareButton">
  Just some text
</button>
<button class="squareButton">
  Text that spans over more than 1 line
</button>
<button class="squareButton">
  Text that spans over 3 lines even has a bigger space
</button>
<button class="squareButton">
  Short text
</button>

CSS：

.squareButton {
   height:150px;
   width:150px;
   position: relative;
}

使用此http://codepen.io/anon/pen/LNZmdd?editors=1100

的小型编解码器

Answer 1

将vertical-align:top;添加到方形按钮类。这将确保所有按钮都正确对齐。

.squareButton {
   height:150px;
   width:150px;
   position: relative;
  vertical-align:top;
}

<button class="squareButton">
  Just some text
</button>
<button class="squareButton">
  Text that spans over more than 1 line
</button>
<button class="squareButton">
  Text that spans over 3 lines even has a bigger space
</button>
<button class="squareButton">
  Short text
</button>

Answer 2

CSS：

.squareButton {
   height:150px;
   width:150px;
   position: relative;
  vertical-align:top;
}

当文本内部长度超过按钮的宽度时，按钮向下移动

2 个答案: