导航菜单 - 渲染将管道符

我有在顶部显示的链接寥寥三夏，例如：导航菜单 - 渲染将管道符

Link 1 | Link 2 | Link 3

目前他们每一个asp：超链接。 Is there a clever solution for rendering out the dividing pipe characters?

目前它们位于包含的占位符内。我们无法保证总是出现给定的链接。我不想if语句一个非常大的，我不愿意渲染纯粹所有环节中的代码隐藏...

[更新]

感谢您指出的是CSS是要走的路。这当然使事情变得更容易。当然，我们确实需要一个跨浏览器的解决方案。

的HTML列表（<UL> & <李>）结构的工作原理一种享受，因为第一胎/最后孩子属性有列表的末尾的照顾。注意：这些是自动的 - 您不必在标记中分配它们。

由于我们只需要管道符号，我使用了边界属性。如果你愿意，你可以使用空白左边 + 背景图像CSS属性来代替图像间隔。

我们的解决方案：

HTML：

<ul class="navMenu"> 
    <li><a href="...">Link 1</a></li> 
    <li><a href="...">Link 2</a></li> 
    <li><a href="...">Link 2</a></li> 
</ul>

CSS：

ul.navMenu li 
{ 
    display: inline; 
    margin-left: 0; 
} 

ul.navMenu a 
{ 
    border-left: solid 1px #333333; 
    padding-left: 0.4em; 
    padding-right: 0.4em; 
} 

ul.navMenu li.first-child a 
{ 
    border-left: none 0; 
    padding-left: 0; 
}

来源

2009-02-20 Overflew

的a + a CSS解决方案不会在所有浏览器的工作，很遗憾。

我通常标记我的名单，如：

<ul> 
    <li class="first-child"><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li class="last-child"><a href="#">Link 3</a></li> 
</ul>

这不仅提供更好的JavaScript钩子，但是你可以自定义左/右边元素关闭边境或在必要时调整填充。

来源

2009-02-20 02:07:33

创建类似于问题中提到的菜单最好使用此方法完成。撒上一点CSS +图像，你应该得到你想要的更容易维护代码。 – 2009-02-20 02:10:39

CSS和/或JQuery方法效果很好。但有些时候你可能只想要<a></a> | <a></a> | <a></a>。

这可能是值得您花时间来看看几个服务器端控件。根据你获得链接的位置（你说有些可能会丢失？），你可以使用一个控件，它有一个你可以放置的位置。如果链接缺失取决于登录的用户和某种用户角色，也许可以使用站点地图+控件，它也有一个。

来源

2009-02-20 07:19:32

导航菜单 - 渲染将管道符

回答

相关问题