html - 最好的布置方式是什么？水平规则？

Question

我正在尝试将水平线与菜单中的白线对齐。我希望在不同屏幕上查看时保持对齐。我这样做的最佳选择是什么？它需要看起来像的图片:

* {
  margin: 0;
}
@font-face {
  font-family: jaapokkisubtract;
  src: url('jaapokkisubtract.ttf');
}
body {
  background-color: #ca3600;
}
#head {
  height: 65px;
  border-bottom: 3px solid white;
  float: right;
  width: 51%;
}
h1 {
  color: white;
  margin: 10px 0 0 10px;
  font-family: jaapokkisubtract;
  font-size: 50px;
  float: left;
}
#work_btn {
  display: block;
  width: 96px;
  height: 68px;
  background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
  overflow: hidden;
  text-indent: -9999px;
  float: right;
}
#work_btn:hover {
  background-position: 0 -68px;
}
#resume_btn {
  display: block;
  width: 125px;
  height: 68px;
  background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
  overflow: hidden;
  text-indent: -9999px;
  float: right
}
#resume_btn:hover {
  background-position: 0 -68px;
}

 <h1>Alexander</h1>
<div id="menu">
  <a id="resume_btn" href="resume.html" title="Resume">Resume</a>
  <a id="work_btn" href="index.html" title="Work">Work</a>
  <div id="head"></div>
</div>

Answer 1

您可以通过稍微修改 CSS 和 HTML 代码并使用转换将菜单项移动到屏幕中央来实现这一点。

为此你需要:

• 用底部边框包裹 div 中的所有内容(例如:#head)
• 将页面标题 (h1) float 到左侧(尽管将其位置更改为 absolute 可能会更好，否则它可能会影响菜单链接)<
• 将所有导航元素包裹在一个 div 中(例如:#menu)，绝对位置位于 #head 的中心(left:50% )

• 转换 #menu div 以将其宽度的 50% 向左移动。这可以通过将其添加到其样式来实现:

  transform:translate(-50%, 0%)
  

您可以在此处查看演示:http://jsfiddle.net/o4ff4thc/或以下:

* {
    margin: 0;
}
@font-face {
    font-family: jaapokkisubtract;
    src: url('jaapokkisubtract.ttf');
}
body {
    background-color: #ca3600;
}
#head {
    height: 65px;
    border-bottom: 3px solid white;
}
h1 {
    color: white;
    margin: 10px 0 0 10px;
    font-family: jaapokkisubtract;
    font-size: 50px;
    float: left;
}
#work_btn {
    display: inline-block;
    width: 96px;
    height: 68px;
    background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
}
#work_btn:hover {
    background-position: 0 -68px;
}
#resume_btn {
    display:inline-block;
    width: 125px;
    height: 68px;
    background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
    overflow: hidden;
    text-indent: -9999px;
}
#resume_btn:hover {
    background-position: 0 -68px;
}

#menu {
    position:absolute;
    left:50%;
    transform:translate(-50%,0%);
    height:20px;
    width:245px;
}

<div id="head">
     <h1>Alexander</h1>

    <div id="menu"> 
        <a id="resume_btn" href="resume.html" title="Resume">Resume</a>
        <a id="work_btn" href="index.html" title="Work">Work</a>
    </div>
</div>