Question

我正在尝试创建一个由header和h1元素组成的nav。我希望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属性用作块。< / p>

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>

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

垂直对齐HTML / CSS中的Div

HTML

CSS

2 个答案: