HTML/CSS 中的垂直对齐 div答案

【问题标题】：Vertical-Align Divs in HTML/CSSHTML/CSS 中的垂直对齐 div
【发布时间】：2010-12-03 05:32:52
【问题描述】：

我正在尝试创建一个由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;}

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

谢谢！

【问题讨论】：

错字：关闭</nav> 缺少/ 和导航规则缺少最后一个;。

标签： css html vertical-alignment

【解决方案1】：

尽可能干净：

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

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

【讨论】：

感谢 kRON 但没有运气 :( 。我仍然需要使用边距和填充来正确定位它。也就是说，我很确定没有办法不这样做。
好吧，如果您提供更多背景信息，我很乐意提供帮助。无论如何，我都不会为此烦恼太多。每个包含您合并的演示文稿的单个标题功能都应该令人恐惧地接近；页面标题的样式在任何网站上都是完全的巫术——你永远不会找到一个元素更少的结构（类型和计数两者），但在任何地方都有如此多的嵌套和重叠的样式规则！！！我刚登陆雅虎！在整洁的 SO 标头之后让自己放心，当我遍历他们的标头时几乎要吐了，这占整个 Web 的大多数。

【解决方案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>

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

【讨论】：