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?_问答_开发者

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?

开发者 https://www.devze.com 2023-01-13 01:58 出处：网络

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

相关专题：asp.net css

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?)