多行文字高度固定的按钮不会在同一垂直位置显示 高度固定的按钮css使垂直位置难看，因为每个按钮文本都不止一行

我试着评论高度：80px；然后所有的按钮在顶部垂直对齐，但所有的按钮都有不同的高度，使按钮组看起来很难看，特别是我需要生成超过10个按钮

button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #444;
  width: 120px;
  height:80px !important;
  display:inline-block;
  padding:5px;
  margin: 5px 10px;
  background-color: #fdfdfd;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  border-radius: 3px;
  word-wrap: break-word;
}

如何将按钮固定在高度，所有按钮垂直放置在顶部。 注意：每个按钮都有不同的字数，单词换行为1行、2行、3行…如果添加垂直对齐：顶部；这将解决您的问题

CSS

运行下面的代码段以查看结果

钮扣{ 字体系列：Arial、Helvetica、无衬线字体； 字体大小：正常； 颜色：444； 宽度：120px； 高度：80px； 显示：内联块； 填充物：5px； 利润率：5x10px； 背景色：fdfd； 边框：1px实心cdcdcd； 光标：指针； 边界半径：3px； 单词包装：打断单词； 垂直对齐：顶部； } 一行文本 此按钮中多行的文本 此按钮中两行以上具有相同高度的文本 此按钮中三行以上具有相同高度但文本较多的文本

<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>

button {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: #444;
   width: 120px;
   height: 80px;
   display: inline-block;
   padding: 5px;
   margin: 5px 10px;
   background-color: #fdfdfd;
   border: 1px solid #cdcdcd;
   cursor: pointer;
   border-radius: 3px;
   word-wrap: break-word;
   vertical-align: top;
}