ASP.NET 4.0 菜单控件 - 为什么呈现的 <div> 元素不像普通 block 元素那样工作并填满其父元素的宽度?

标签 asp.net css

标题提出了问题。这是一个场景:

您正在使用 ASP.NET 4.0/C# 制作网站,尽管 xml 单独适用于此示例。该站点将有一个站点地图和一个带有菜单控件的默认页面,如下所示:

网站 map

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/default.aspx" title="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
注意:只有<form>的内容显示元素。

<asp:Menu 
  ID="navMenu" 
  DataSourceID="srcSiteMap"
  StaticEnableDefaultPopOutImage="false"
  RenderingMode="list"
  CssClass="navMenu"
  runat="server"> 
</asp:Menu>
<asp:SiteMapDataSource ID="srcSiteMap" runat="server" 

ShowStartingNode="false"/>

样式表.css
_注意:此文件包含在 ~/App_Themes/Default/ 中并在

中引用

Web.config._

body {
width:800px;
margin:0px auto;
}
.navMenu {
background-color:Yellow;
}


使用这些文件后,asp.net 4.0 引擎将继续呈现一列损坏的链接。我无法解释的是为什么这一列只是最宽链接的宽度,而不是 800px body 元素的宽度。即使width:auto;指定为 .navMenu css 类,情况仍然如此。但是,如果您指定 width:100%;width:800px; ,这解决了问题,无论问题是什么。

现在,我几乎不是 css 或 asp.net 渲染引擎的高手,但查看页面的源代码,我根本找不到任何解释。也许我忽略了显而易见的事情,但以科学的名义,我希望发现真相!如果有人有时间创建一个新的 visual studio 解决方案,或者只是简单地了解他/她的头脑,我将不胜感激。

最佳答案

这是您的 .net 创建程序(例如 Visual Studio)或浏览器中的问题吗?如果它不是浏览器的问题,那么它一定是程序自己的样式表

在没有看到 html 输出的情况下,这有点棘手,但我怀疑您会有类似的东西:

<html>
  <body>
    <form>
      <ul class="navMenu">
      </ul>
    </form>
  </body>
</html>

使用 Firebug 或类似的东西,我会检查层中最高的元素是什么,宽度很小。我怀疑表单元素以某种方式收缩包装(显示:内联? float ?)

关于ASP.NET 4.0 菜单控件 - 为什么呈现的 <div> 元素不像普通 block 元素那样工作并填满其父元素的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3539581/

相关文章:

css - 如何将 <img> 居中放在 div 中并使其随 div 的高度缩放?

jquery - CSS变换旋转不流畅

html - 使用内联 block 时,包含宽度为 50% 的 UL 的 Div 将无法正确排列

asp.net - 'Text' 的 'asp:TextBox' 属性不允许子对象 #2

javascript - jQuery 或 javascript 中是否有 'if (!Page.IsPostBack)' 之类的东西?

asp.net - 如何阻止来自同一 IP 的多个请求

css - 第 n 个嵌套元素的选择器

javascript - 我想转换一个巨大的 excel 工作簿(带有多个选项卡)和隐藏在网页上的几列和几行

c# - 如何从 hibernate.cfg.xml 文件中获取连接字符串值?

asp.net - LINQ to SQL Web 应用程序最佳实践