多行文本的 HTML + CSS 换行和对齐按钮文本位置

Question

我正在制作一组在移动设备上使用的按钮，它们具有定义的最小宽度和最大宽度，以确保按钮的尺寸不会因移动屏幕尺寸而变得过宽。

按钮内的文本大小不一，为了适应更长的文本，我确保将它们白换行到下一行。但是，当我这样做时，按钮的位置会向下移动，而文本仍然对齐(参见图片:6 岁以下的幼儿)。

如何确保所有按钮彼此对齐，同时确保文本在需要时换行？

谢谢!

#m-container {
  max-wdith:375px;
  width:375px;
  overflow:auto;
  height: 667px;
  max-height: 667px;
  border:1px solid black;
}
#m-search-ffv-carousel {
    padding:10px;
    overflow: auto;
    white-space: nowrap;
    float: left;
    margin-bottom: 0.5rem;
}

button.filter {
      background-color: #eee;
      border: 1px solid #ccc;
      color: #333;
      white-space: normal;
      cursor: pointer;
      overflow: hidden;
      text-align: center;
      margin-right: 0.65rem;
      min-width: 95px;
      max-width: 120px;
      min-height: 45px;
      text-transform: none;
      line-height: 16px;
      font-weight: 200;
      font-size: 0.775rem;
      display: inline-block;
      align-items: center;
      justify-content: center;
      top: 0px;

<h2>Mocked Mobile size</h2>
<div id="m-container">
<div id="m-search-ffv-carousel">
          <button class="filter" id="">Boys</button>
          <button class="filter" id="">Baby Toddlers under 6</button>
          <button class="filter" id="">Male</button>
          <button class="filter" id="">Female</button>
          <button class="filter" id="">Show more</button>          
</div>
</div>

Answer 1

只需将 vertical-align:top 添加到 button.filter。

#m-container {
  max-wdith:375px;
  width:375px;
  overflow:auto;
  height: 667px;
  max-height: 667px;
  border:1px solid black;
}
#m-search-ffv-carousel {
    padding:10px;
    overflow: auto;
    white-space: nowrap;
    float: left;
    margin-bottom: 0.5rem;
}

button.filter {
      vertical-align:top;
      background-color: #eee;
      border: 1px solid #ccc;
      color: #333;
      white-space: normal;
      cursor: pointer;
      overflow: hidden;
      text-align: center;
      margin-right: 0.65rem;
      min-width: 95px;
      max-width: 120px;
      min-height: 45px;
      text-transform: none;
      line-height: 16px;
      font-weight: 200;
      font-size: 0.775rem;
      display: inline-block;
      align-items: center;
      justify-content: center;
      top: 0px;

<h2>Mocked Mobile size</h2>
<div id="m-container">
<div id="m-search-ffv-carousel">
          <button class="filter" id="">Boys</button>
          <button class="filter" id="">Baby Toddlers under 6</button>
          <button class="filter" id="">Male</button>
          <button class="filter" id="">Female</button>
          <button class="filter" id="">Show more</button>          
</div>
</div>