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

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 代码，并使用翻译将菜单项移动到屏幕中央来实现。

为此您需要：

用 border-bottom 包裹 div 中的所有内容（例如：#head）
将页面标题 (h1) 浮动到左侧（尽管将其位置更改为 absolute 可能会更好，否则可能会影响菜单链接）
将所有导航元素包裹在div（例如：#menu）中，绝对位置位于#head（left:50%）[=40]的中心=]
变换 #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>

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

What's the best way of laying this out? Horizontal Rule?

html

css

layout

rule