导航菜单 - 渲染分隔管道字符答案

【问题标题】：Nav menu - Rendering dividing pipe characters导航菜单 - 渲染分隔管道字符
【发布时间】：2009-02-20 01:45:43
【问题描述】：

我有一个 web 控件，顶部显示了一些链接，例如：

Link 1 | Link 2 | Link 3

目前它们都是一个 asp:Hyperlink。 Is there a clever solution for rendering out the dividing pipe characters?

目前它们位于包含的占位符中。我们无法对始终出现的给定链接做出任何保证。我不想要一个非常大的 if 语句，我也不愿意纯粹在代码隐藏中呈现所有链接......

[更新]

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

HTML 列表 (

) 结构可以作为 first-child / last-child 属性负责列表的末尾。注意：这些是自动的 - 您不必在标记中指定它们。

由于我们只需要管道符号，因此我使用了边框属性。如果你愿意，你可以使用 margin-left + background 图片 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;
}

【问题讨论】：

标签： asp.net html algorithm user-interface

【解决方案1】：

很遗憾，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 钩子，而且您可以自定义最左边/最右边的元素以关闭边框或根据需要调整填充。

【讨论】：

创建一个像问题中提到的那样的菜单最好使用这种方法来完成。撒上一点 CSS + 图片，你应该得到你想要的东西，代码更容易维护。
我会同意这种方法。如果你想变得花哨，你可以使用 jQuery 来动态添加类，或者为你的菜单添加额外的效果。

【解决方案2】：

CSS 和/或 JQuery 方法效果很好。不过，有时您可能真的只想要<a></a> | <a></a> | <a></a>。

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

【讨论】：