導航菜單 - 渲染將管道符

我有在頂部顯示的鏈接寥寥三夏，例如：導航菜單 - 渲染將管道符

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

導航菜單 - 渲染將管道符

回答

相關問題