html - Css 和一个轻微的挫败感

Question

我目前正在开发一个网页，并且lis 有一个border-rightof1px作为分隔符。但是，边界不足以完成这项工作。

以下是代码段和一些屏幕截图：

菜单 HTML

<nav id="home-nav" class="posabs">
 <ul class="nav">
  <li id="hdoc" style="border-right:1px solid #aaa6a0;"><a href=""><span>Original Content</span></a></li>
  <li id="hpnd" style="border-right:1px solid #aaa6a0;"><a href=""><span>Production &amp; Digital</span></a></li>
  <li id="hcns" style="border-right:1px solid #aaa6a0;"><a href=""><span>Commercials &amp; Shorts</span></a></li>
  <li id="hind"><a href=""><span>Distribution &amp; Sales</span></a></li>
 </ul>
</nav>

CSS

<style type="text/css">
#home-nav a span{display:block;background-image:url(../images/guru_silos.png);background-norepeat:0 0;height:52px;text-indent:-9999px;}
#home-nav a{height:104px;}
#hdoc a{width:188px;height:48px;margin-right:35px;}
#hpnd a{width:191px;height:50px;margin-right:35px;}
#hcns a{width:209px;height:52px;margin-right:35px;}
#hind a{width:196px;height:51px;}
#hdoc ul li{border-left:1px solid #aaa6a0;height:50px;}
#hpnd ul li{border-left:1px solid #aaa6a0;height:50px;}
#hcns ul li{border-left:1px solid #aaa6a0;height:50px;}
#hind ul li{border-left:1px solid #aaa6a0;height:50px;}
#hdoc a span{width:188px;background-position:-190px -159px;margin:25px 0 0 14px;}
#hdoc a:hover span{background-position:0px -159px}
#hpnd a span{width:191px;background-position:-211px -105px;margin:25px 0 0 12px;}
#hpnd a:hover span{background-position:-211px -52px}
#hcns a span{width:209px;background-position:0px -53px;margin:25px 0 0 18px;}
#hcns a:hover span{background-position:0px 0px}
#hind a span{width:196px;background-position:-211px 0px;margin:25px 0 0 22px;}
#hind a:hover span{background-position:0px -107px}
</style>

想要的样子

CSS 的预期结果，来自 Illustrator 文件。请忽略缺少的背景。

当前外观

我的 CSS 和 HTML 的当前结果。

Answer 1

建议，请使 CSS 更具可读性，然后将其粘贴到此处。

关于这个问题，我要做的是将这个添加到 li line-height: 50px/* 你想要的任何高度 */ 然后border-right:1px solid #666;在这种情况下边框将是 50px，这是块的高度

Answer 2

我做了一个简单的例子。语义很好，根据自己的喜好编辑它！我猜这就是你想要的？

例子

您可以使用“li a”的文本缩进来使用背景图像。干杯。