1

我想创建一个看起来像这样的水平菜单导航：

{image1} ITEM1 [separator1] {image2} ITEM2 [separator2] 等等。

我有一个限制：HTML 应该是完整的、不变的。这是否仅适用于具有以下标记的 CSS：http: //jsfiddle.net/Mrt4V/

现在，我尝试了很多变体，最后使用了 :before 和 :after 伪元素，但现在菜单显示如下：

{image1} [separator1] ITEM1 {image2} [separator2] 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

1

对于这种场景，定位是关键部分。

添加position:relative到<a>标签position:absolute和:before& : after。

原因是相对于标签放置:before& 。:after<a>

我梳理了 CSS 中的更改以获得所描述的结果。

下面是工作小提琴：

http://jsfiddle.net/MasoomS/gwxndwka/

于 2015-08-22T03:02:24.493 回答
0

只需设置 :afterdisplay:inline-block并删除float:left

这是示例http://jsfiddle.net/Mrt4V/1/

于 2013-01-05T15:05:52.170 回答