Question

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

Link 1 | Link 2 | Link 3

目前他们都是asp：Hyperlink。 Is there a clever solution for rendering out the dividing pipe characters?

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

[更新]

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

HTML列表（＆lt; ul＆gt; ＆amp; ＆lt; li＆gt; ）结构可以作为第一个孩子 / last-child 属性负责列表的结尾。注意：这些是自动的 - 您不必在标记中分配它们。

因为我们只需要管道符号，所以我使用了border属性。如果您愿意，可以使用 margin-left + 背景图像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;
}

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

Answer 2

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

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

导航菜单 - 渲染分割管道字符

2 个答案: