0
ASP.NET菜單控件我有一塊一塊的HTML的，看起來像這樣 -造型與標準的CSS
<div id="moduleList">
<ul>
<li class="noBorder"> </li>
<li class="noBorder">
<span class="currentTabLeft"> </span><span class="currentTab">
<a href="Welcome.aspx"
id="grouptab_0">Home</a>
</span><span class="currentTabRight"> </span>
</li>
<li>
<span class="notCurrentTabLeft"> </span><span class="notCurrentTab">
<a href="Locations.aspx">Locations</a>
</span><span class="notCurrentTabRight">
</span>
</li>
<li>
<span class="notCurrentTabLeft"> </span><span class="notCurrentTab">
<a href="Users.aspx"
id="grouptab_2">Users</a>
</span><span class="notCurrentTabRight"> </span>
</li>
<li>
<span class="notCurrentTabLeft"> </span><span class="notCurrentTab">
<a href="Reports.aspx"
id="grouptab_3">Reports</a>
</span><span class="notCurrentTabRight"> </span>
</li>
<li>
<span class="notCurrentTabLeft"> </span><span class="notCurrentTab">
<a href="Alerts.aspx"
id="grouptab_4">Alerts</a>
</span><span class="notCurrentTabRight"> </span>
</li>
<li>
<span class="notCurrentTabLeft"> </span><span class="notCurrentTab">
<a href="Preferences.aspx"
id="grouptab_5">Preferences</a>
</span><span class="notCurrentTabRight"> </span>
</li>
</ul>
</div>
這與伴隨而來的樣式看起來有點像這樣 -
#moduleList {
background-image:url(images/tabRowGrayBg.gif);
background-repeat:repeat-x;
border-bottom-color:#565656
}
#moduleList>ul>li {
background-image:url(images/otherTabGray.gif)
}
#moduleList ul li span.currentTab a:link, #moduleList ul li span.currentTab a:visited, #moduleList ul li span.currentTab a:hover {
color:#ffffff
}
#moduleList ul li a:link, #moduleList ul li a:visited {
color:#444444
}
#moduleList ul li a:hover {
color:#000000
}
#moduleList ul li span.currentTabLeft, #moduleList ul li span.currentTabRight, #moduleList ul li span.currentTab {
background-image:url(images/currentTabGray.gif);
background-repeat:no-repeat;
border-bottom-color:#8e8e8e
}
現在，我寫了下面的代碼在.aspx文件中複製上面的代碼產生的黏合功能 -
<div id="moduleList">
<!-- start of content for ContentContainer -->
<asp:Menu CssClass="TabMenu" DataSourceID="TabMenuSitemap"
HideSelectElements="True"
ID="Menu2" Orientation="Horizontal" runat="server">
<StaticSelectedStyle CssClass="TabMenuItemSelected" />
<StaticMenuItemStyle CssClass="TabMenuItem" />
<StaticMenuStyle CssClass="SiteStaticMenu" />
<StaticHoverStyle CssClass="TabMenuItemHover" />
<DataBindings>
<asp:MenuItemBinding DataMember="SiteMapNode" Depth="0"
NavigateUrlField="Url" TextField="Title"
ToolTipField="Description" />
</DataBindings>
</asp:Menu>
</div>
我確保將它包裝在一個名爲moduleList的div中。不幸的是，上面的.aspx生成的HTML看起來並不像我希望的那樣。它使用嵌套表格，看起來像這樣產生的東西 -
<div id="moduleList">
<a href="#ctl00_AjaxLoginView1_Menu2_SkipLink"><img alt="Skip Navigation Links" src="/eservice/WebResource.axd?d=HWE7J2PUlnLya8lWJlEVZw2&t=634129453271895014" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_AjaxLoginView1_Menu2" class="TabMenu SiteStaticMenu ctl00_AjaxLoginView1_Menu2_5 ctl00_AjaxLoginView1_Menu2_2" HideSelectElements="True" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage1" id="ctl00_AjaxLoginView1_Menu2n0"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage1.aspx" style="border-style:none;font-size:1em;">TabPage1</a></td>
</tr>
</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage2" id="ctl00_AjaxLoginView1_Menu2n1"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_6" href="/eservice/TabPage2.aspx" style="border-style:none;font-size:1em;">TabPage2</a></td>
</tr>
</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage3" id="ctl00_AjaxLoginView1_Menu2n2"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage3.aspx" style="border-style:none;font-size:1em;">TabPage3</a></td>
</tr>
</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage4" id="ctl00_AjaxLoginView1_Menu2n3"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage4.aspx" style="border-style:none;font-size:1em;">TabPage4</a></td>
</tr>
</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage5" id="ctl00_AjaxLoginView1_Menu2n4"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage5.aspx" style="border-style:none;font-size:1em;">TabPage5</a></td>
</tr>
</table></td>
</tr>
</table><a id="ctl00_AjaxLoginView1_Menu2_SkipLink"></a>
<div id="SiteContent">
</div>
<div class="SiteContentSpacer">
</div>
</div>
有沒有辦法迫使ASP：菜單控制吐出UL和李，而不是表，這樣我就可以用我現有的CSS樣式風格他們是否正確或者是失敗的原因？有沒有人遇到類似的問題？
這就像一個魅力。感謝Marko。 – Das 2010-07-11 23:33:14