HTML 标题对齐

Question

我正在尝试创建一个标题，其中包含图像和链接，这些链接将充当用户导航的导航菜单。我希望布局看起来像 this。 .

但是，我似乎无法将导航菜单的对齐方式正确地垂直对齐到标题中下划线的正上方。

        <header>
            <div>
                <img id="headerimage" src="" />             
            </div>
            <nav id="headernav">
                <ul id="list">
                    <li class="menuitem">
                        <a href="">Link1</a>
                    </li>
                    <li class="menuitem">
                        <a href="">Link2</a>
                    </li>                           
                </ul>
            </nav>          
        </header>

CSS:

html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}

#header {
    border-bottom: 2px solid black;
}

header  {
margin: 0;
background-color: #cccccc;
}


height: 5%;
   width: 100%;
}

.menuitem {
    display: inline;
    float: right;
    vertical-align: top;
    margin-right: 2%;
}

#headerimage {
    width: 36px;
    height: 36px;
    margin-left: 3%;
    vertical-align: middle;
}

如何将链接移至页面右侧并移动到边框上方？任何帮助将不胜感激。

Answer 1

您的 CSS 代码段有一些拼写错误，可能应该是:

html, body {
  height: 100%;
  background-color: #cccccc;
  margin: 0;
}

header  {
  margin: 0;
  background-color: #cccccc;
  height: 5%;
  width: 100%;
  border-bottom: 2px solid black;
}

.menuitem {
  display: inline;
  float: right;
  vertical-align: top;
  margin-right: 2%;
}

#headerimage {
  width: 36px;
  height: 36px;
  margin-left: 3%;
  vertical-align: middle;
}

所以你需要更正它。
标题占页面高度的 5% 对我来说意义不大，而且因为 menuitem 项是 float 的，所以它们对标题内容。

如果你给标题一个足够大的固定高度，例如height: 80px; 然后它会显示你想要的。

编辑:

另一种方法是给 menuitem 一个相对位置，然后将顶部偏移标题中图像的高度(它是唯一具有固定高度的元素)，并将边框应用于包含标题图像的 div(参见 http://codepen.io/raad/pen/oyncv):

HTML

<header>
  <div class="imagecontainer">
    <img id="headerimage" src="" />             
  </div>
  <nav id="headernav">
    <ul id="list">
      <li class="menuitem">
        <a href="">Link2</a>
      </li>
      <li class="menuitem">
        <a href="">Link1</a>
      </li>                           
    </ul>
  </nav>
</header>

CSS

html, body {
  height: 100%;
  background-color: #cccccc;
  margin: 0;
}

header  {
  margin: 0;
  background-color: #cccccc;
  height: 5%;
  width: 100%;
}

.imagecontainer {
  border-bottom: 2px solid black;
}

.menuitem {
  position: relative;
  top: -36px;
  display: inline;
  float: right;
  margin-right: 2%;
}

#headerimage {
  width: 36px;
  height: 36px;
  margin-left: 3%;
  vertical-align: middle;
}