ASP.NET 4.0 Menu Control - Why doesn't the rendered <div> element act like a normal block element and fill up its parent's width?
The title poses the question. Here's a scenario:
You're making a website with ASP.NET 4.0/C#, although xml alone is suitable for this example. The site will have a site map and a default page with a menu control, as follows:
Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/default.aspx" tit开发者_高级运维le="Home" description="">
<siteMapNode url="~/1.aspx" title="Link 1" description="" />
<siteMapNode url="~/2.aspx" title="Link 2" description="" />
<siteMapNode url="~/3.aspx" title="Link 3" description="" />
<siteMapNode url="~/4.aspx" title="Link 4" description="" />
<siteMapNode url="~/5.aspx" title="Link 5" description="" />
</siteMapNode>
</siteMap>
Web.config
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0"/>
<pages theme="Default" clientIDMode="AutoID">
</pages>
</system.web>
</configuration>
Default.aspx
Note: Only the contents of the<form> element are shown.
<asp:Menu
ID="navMenu"
DataSourceID="srcSiteMap"
StaticEnableDefaultPopOutImage="false"
RenderingMode="list"
CssClass="navMenu"
runat="server">
</asp:Menu>
<asp:SiteMapDataSource ID="srcSiteMap" runat="server"
ShowStartingNode="false" />
StyleSheet.css
_Note: This file is included in~/App_Themes/Default/ and referenced in
Web.config._
body {
width:800px;
margin:0px auto;
}
.navMenu {
background-color:Yellow;
}
With these files in use, the asp.net 4.0 engine will proceed to render a column of broken links. What I am unable to explain is why this column is only the width of the widest link, instead of the width of the 800px body element. Even if width:auto; is specified for the .navMenu css class, this remains the case. However, if you specify width:100%; or width:800px;, this fixes the problem, whatever the problem may be.
Now, I am hardly a master of css or the asp.net rendering engine, but looking at the page's source, I simply can't find any explanation. Perhaps I'm overlooking the obvious, but in the name of science, I hope to discover the truth! Should someone find the time to create a new visual studio solution, or simply know off the top of his/her head, I'd appreciate it.
Is this an issue within your .net creation program (e.g. Visual studio) or a browser? If it is not an issue in browser then it must be the program's own stylesheet
without seeing the html output this is a little tricky but I suspect you will have something like:
<html>
<body>
<form>
<ul class="navMenu">
</ul>
</form>
</body>
</html>
using firebug or something similar I would check to see what the highest item in the tier is with the small width. I suspect that the form element is somehow shrink wrapping (is it display:inline? floated?)
加载中,请稍侯......
精彩评论