如何通过CSS制作相同高度的所有按钮？

Question

可以通过Javascript选择。 另一个选择是通过CSS height: 60px;给出高度但是如果文本更多呢？

.slider {
  width: 323px;
}
.yo-btn {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 0;
  background: #fff;
  border-color: #e0e0e0;
}

<div class="slider">
  <button type="button" class="yo-btn yo-btn-range" value="1" style="width: 25%;">Small</button>
  <button type="button" class="yo-btn yo-btn-range" value="3" style="width: 25%;">Slightly Large</button>
  <button type="button" class="yo-btn yo-btn-range" value="4" style="width: 25%;">Large</button>
</div>

目前的输出是：

Answer 1

我建议使用flexbox。

.slider {
  display: flex;
}

＆＃13;

＆＃13;

.slider {
  display: flex; /*ADDED*/
  width: 323px;
}
.yo-btn {
  display: inline-block;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 2px; /*EDITED*/
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 0;
  background: #fff;
  border-color: #e0e0e0;
}

＆＃13;

<div class="slider">
  <button type="button" class="yo-btn yo-btn-range" value="1" style="width: 25%;">Small</button>
  <button type="button" class="yo-btn yo-btn-range" value="3" style="width: 25%;">Slightly Large</button>
  <button type="button" class="yo-btn yo-btn-range" value="4" style="width: 25%;">Large</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用跨浏览器解决方案 -

lock