HTML/CSS 中的垂直对齐 Div

Question

我正在尝试创建一个由 h1 和 nav 元素组成的 header 。我希望 nav 的底部与 h1 的底部对齐。

这是我尝试过的：

HTML

<header>
    <h1>Web site Header</h1>
      <nav>
         <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
         </ul>
       </nav>
 </header>

CSS

header {vertical-align: bottom; width: 100%; height: 300px;}
h1 {vertical-align: bottom; float: left;}
nav {vertical-align: bottom; float: right;}
nav ul li {display: inline;}

我可以通过为元素设置精确的边距来做到这一点，但我认为这会更干净（如果可能的话）。关于如何修复它/是否可以完成有什么建议吗？

谢谢！

Answer 1

尽可能干净：

<style>
    header > * { display: inline-block; }
    nav li { display: inline; }
</style>

直接 header 后代现在是内联块，即它们不会将周围的内容推到其下方，但它们仍然可以利用 margin 和padding 属性作为块。

Answer 2

可以通过多种不同的方式来实现。边距是为定位而设计的，但如果您不想使用边距或填充，则可以使用绝对定位：

CSS：

header
{
  display: block;
  height: 300px;
  width: 100%;
}
h1
{
  float: left;
  margin: 0;
  height: 32px;
}
nav
{
  display: block;
  height: 32px;
  position: relative;
}
nav ul
{
  bottom: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
}
nav ul li
{
  display: inline-block;
}

HTML：

<header>
  <h1>Web site Header</h1>
  <nav>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ul>
  </nav>
</header>

这依赖于了解标题的高度，并将标题和导航设置为相同的高度/边距。