1

次のような水平メニュー ナビゲーションを作成したいと思います。

{画像1} ITEM1 [セパレータ1] {画像2} ITEM2 [セパレータ2] など

私には制限があります。HTML はそのままで、変更されていない必要があります。これは、次のマークアップを含む CSS でのみ可能ですか: http://jsfiddle.net/Mrt4V/

今のところ、私は多くのバリエーションを試し、最終的に :before と :after 疑似要素になりましたが、メニューは次のように表示されます:

{画像1} [セパレータ1] ITEM1 {画像2} [セパレータ2] ITEM2 など

これがボトルネックになる可能性があると思います：

li a:after {
  content: '';
  float: left;
  zoom: 1;
  margin: 0 0 0 2px;
  width: 4px;
  height: 16px;
  background: url('http://static-caselogic-com.r.worldssl.net/images/CaseLogic/Misc/CategoryMenuSeparator.png') 0 0 no-repeat;
}

私は何を間違っていますか？

4

2 に答える 2

0

:afterdisplay:inline-blockを設定して削除するだけですfloat:left

ここに例がありますhttp://jsfiddle.net/Mrt4V/1/

于 2013-01-05T15:05:52.170 に答える