1

このリストメニューがあり、各アイテムの矢印を表示したいので、アイテムにカーソルを合わせると矢印の色が変わります。これまでのところ、私の問題は、この矢印をテキストと比較して垂直方向の中央に揃えることにあるようです。スクリーンショットからわかるように、少しずれています。矢印とハイパーリンクの間の欠落しているスペースは無視してください。

フィドル： http： //jsfiddle.net/7xbse/

スクリーンショット

HTML、

<li ><a class="clear-block" href="http://wordpress.local/archives/category/announcements" title="View all posts filed under Announcements">
 <span class="tt">Announcements <strong>(1)</strong></span>
 <span class="c1"></span>
</a></li>
<li ><a class="clear-block" href="http://wordpress.local/archives/category/c-sharp" title="View all posts filed under C#">
 <span class="tt">C# <strong>(1)</strong></span>
 <span class="c1"></span>
</a></li>
<li  class="extends"><a class="clear-block" href="http://wordpress.local/archives/category/c-plus-plus" title="View all posts filed under C++">
 <span class="tt">C++ <strong>(1)</strong></span>
 <span class="c1"></span>
</a>
   <ul class="sub-menu">
    <li ><a class="clear-block" href="http://wordpress.local/archives/category/c-plus-plus/multiplexing-io" title="View all posts filed under Multiplexing I/O">
 <span class="tt">Multiplexing I/O <strong>(1)</strong></span>
 <span class="c1"></span>
</a></li>
   </ul>
</li>

CSS、

.block ul.menu, .block ul.menu ul, .block ul.menu li, .block .box, .block .box .entry{
  margin:0;
  padding:0;
  list-style-type:none;
  line-height: normal;
}

.block ul.menu li, .block ul.box .entry{
  border-bottom:1px dotted #aaa;
  border-top:1px dotted #fff;
}

/* no border on 1st list item */
.block ul.menu li.first,
.block ul.menu li:first-child,
.block ul.box .entry.first,
.block ul.box .entry:first-child{border-top:0 !important;}

.block ul.menu li.last,
.block ul.menu li:last-child,
.block ul.box .entry.last,
.block ul.box .entry:last-child{border-bottom:0 !important;}

.block ul.menu li .expand{display: none;}

.block ul.menu li, .block ul.box .entry {
  position: relative;
  z-index: 5;
}

.block ul.menu li a {
  background:transparent url(../images/icons_old.png) no-repeat 4px -816px;
}

/* titles */
.block ul.menu .tt {
  display:block;
}

.block ul.menu a:hover .tt{
  text-decoration:underline;
}

/* content - primary */
.block ul.menu .c1{
  display:block;
  line-height: 150%;
  color:#333;
  text-decoration:none;
}

/* information block (left side) */
.block ul.menu .base {
  overflow:hidden;
  display:block;
}
4

2 に答える 2

0

巨大なCSSスプライトを使用するのではなく、各画像を個別に保存して、画像background-position: 0 50%を垂直方向に中央揃えにするという事実を利用してみませんか？

于 2012-11-27T05:40:30.223 に答える
0

これは、メニュー行の高さを考慮していないスプライト画像がある場合でした。そのため、矢印は整列していませんでした。秘訣はスプライトを修正することでした。

于 2012-12-20T20:54:19.287 に答える