进行此布置的最佳方法是什么？ 水平尺？

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

• 转换#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>