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

Question

我在移动设备上制作了一组按钮，这些按钮具有定义的最小宽度和最大宽度，以确保按钮不会因移动屏幕尺寸而变得太宽。

按钮内的文字大小不一，为了适应更长的文字，我确保将其白色包装到下一行。然而，当我这样做时，按钮位置向下移动，而文本仍然对齐（见图片：6岁以下的婴幼儿）。

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

谢谢！

＆＃13;

＆＃13;

#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;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>