无法获得垂直对齐:顶部可为内联块、固定高度元素正确工作.

Question

我遇到了一个问题，我一直试图让一个容器中的几个元素垂直对齐到这个容器的顶部。元素在顶部和下面的元素之间不应该有任何空间。这个应该倒塌。

下面是HTML：

​

<div class="container">
  <div class="row">
    <div class="col-md-8 category_links">
      <div class="footer_menu" style="height: 83px;">
        <h3 class="secondary">Brands And Categories</h3>
        <ul>
          <li><a href="men">Men</a></li>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md-4">
    </div>
  </div>
</div>

​

下面是CSS：

.footer_menu {
  width: 24%;
  font-weight: bold;
  margin-bottom: 15px;
  vertical-align: top;
  display: inline-block;
}

它在演示站点上的样子：

链接到图像

Answer 1

移除高度并添加下面的CSS

HTML

CSS

.category_links {列隙: 0.5em；柱宽:11 gap；浮点数:左；} .footer_menu {显示:内联块；字体重:粗体；边距:2 2px；填充: 0；宽度: 98%；}

Answer 2

​

.footer_menu {
  width: 24%;
  font-weight: bold;
  margin-bottom: 15px;
  vertical-align: top;
  display: inline-table;
}

ul {
  list-style: none;
  padding: 0;
}

<div class="container">
  <div class="row">
    <div class="col-md-8 category_links">
      <div class="footer_menu" style="height: 83px;">
        <h3 class="secondary">Brands And Categories</h3>
        <ul>
          <li><a href="men">Men</a></li>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="footer_menu" style="height: 64px;">
        <h3 class="secondary">Help And Policy</h3>
        <ul>
          <li><a href="cookie-policy">Cookie Policy</a></li>
          <li><a href="terms-and-conditions">Terms and Conditions</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md-4">
    </div>
  </div>
</div>

​