Question

我多次尝试并搜索了这个板子，但我不能做这样简单的事情：

http://xs.to/xs.php?h=xs139&d=09201&f=menu676.gif

我想渲染一个这样的菜单：

第1项|第2项|第3项| ......等......

“第1项”和管道字符“|” = sIFR呈现文本

HTML：

<div id="menu"> item 1 <span class="pipe"> | </span> item 2 <span class="pipe"> | </span> </div>

这部分位于我最底层的HTML中：

<script type="text/javascript">

var metaroman2 = 

{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] }; 
sIFR.activate(metaroman2);

sIFR.replace(metaroman2, {

selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" }); 
sIFR.replace(metaroman2, {

selector: '.pipe', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956;}'], wmode: "transparent" }); 
</script>

CSS：

.sIFR-active .pipe {

visibility : hidden; line-height : 1em; margin-left : 5px; margin-right : 5 px;
} 
.sIFR-active #menu {

visibility : hidden; line-height : 1em;
}

问题是，“|”字符正好在单词的末尾，（5px）之间没有间距。

我多么想要：第1项[5px空间] | [5像素空间]第2项

我得到了什么：第1项|第2项

其他方法：

如果我尝试使用图像，图像根本不会显示。（“sIFR.fitExactly = true”已在sifr-config中设置）

我的意思是“图像”：代替管道标志，代表管道标志的图像。

HTML：

<div id="menu"> item 1 <img src=...> item 2 <img src=...> </div>

的CSS：

.sIFR-active #menu {

visibility : hidden; line-height : 1em;
}

脚本：这部分在我的HTML底部：

<script type="text/javascript">

var metaroman2 = 

{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] }; 
sIFR.activate(metaroman2);

sIFR.replace(metaroman2, {

selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" }); 

</script>

对于凌乱的代码我很抱歉，但我希望你能对它有所了解。

（编辑：已经使用了几天的sIFR，简单的标题取代了比率的完美工作，但以上就是打败了我）

Answer 1

将每个菜单项包装到单独的元素中，并用sIFR选择器替换它，不要替换管道。只使用CSS将它们包装成span和style。

那些被替换的项目和跨度都应该是浮动块元素。

HTML：

<div id="menu"><a href="#">Item 1</a><span>|<span><a href="#">Item2</a>...

的CSS：

#menu a , #menu span {
    display: block;
    float: left;
}

sIFR + <span>（使用图像的其他方法也不起作用）</span>

1 个答案: