什么是最好的解决方法？横向规则？

Question

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过稍微修改CSS和HTML代码，并使用翻译将菜单项移动到屏幕中心来实现此目的。

要做到这一点，你需要：

• 用div-bottom包裹div中的所有内容（例如：#head）
• 将页面标题（h1）浮动到左侧（尽管最好将其位置更改为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>