3

私は現在ウェブページに取り組んでおり、lis には区切り記号として機能する がありますborder-right。1pxただし、国境は仕事をするのに十分な長さではありません.

コードの一部とスクリーン ショットを次に示します。

メニュー 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>

望ましい外観

http://i.stack.imgur.com/p2fXt.png

Illustrator ファイルからの CSS の望ましい結果。欠落している背景は無視してください。

現在の外観

http://i.stack.imgur.com/kwo4M.png

私のCSSとHTMLの現在の結果。

4

2 に答える 2

2

CSS を読みやすくしてから、ここに貼り付けてください。

この問題について、私がすることは、これを li に追加することですline-height: 50px/* 任意の高さ */border-right:1px solid #666;この場合、境界線はブロックの高さである 50px になります

于 2012-05-07T20:46:03.480 に答える
0

簡単な例を作りました。セマンティックとまあ、好みに合わせて編集してください！私はこれがあなたが望むものだと思いますか？

例

背景画像を使用するために、「li a」のテキストインデントを使用できます。乾杯。

于 2012-05-07T21:35:39.747 に答える