ASP.Net 网页堆叠 xml 文档而不是并排显示，CSS 问题？答案

【问题标题】：ASP.Net web page stacking xml documents instead of showing side by side, CSS issue?ASP.Net 网页堆叠 xml 文档而不是并排显示，CSS 问题？
【发布时间】：2012-03-13 10:22:21
【问题描述】：

我有一个基本的 asp.net 网页。我有一个分为 3 列的菜单栏。每列显示一个 xml 文件。但是，它不是并排显示它们，而是将它们彼此叠放显示。我认为这可能与我的 CSS 有关？

我的 asp.net 网页代码：

<div class="menubar">

        <div class="menuleft">
            <asp:ContentPlaceHolder ID="menubarleft" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        <div class="menucenter">
            <asp:ContentPlaceHolder ID="menubarcenter" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        <div class="menuright">
            <asp:ContentPlaceHolder ID="menubarright" runat="server">
            </asp:ContentPlaceHolder>
        </div>

        </div>

我的css代码：

div.menuleft
{
    float: left;
    width:30%;
    text-align:left;
}

div.menuright
{
    float: right;
    width:30%;
    text-align:right;
}

div.menucenter
{
    float: left;
    width:auto;
    text-align:center;
}

【问题讨论】：

标签： asp.net html css xml vb.net

【解决方案1】：

看看，这是我添加了一个 div 来清除浮动效果并修改了你的样式表的解决方案：

<div class="menubar">

    <div class="menuleft">
        <asp:ContentPlaceHolder ID="menubarleft" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div class="menucenter">
        <asp:ContentPlaceHolder ID="menubarcenter" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div class="menuright">
        <asp:ContentPlaceHolder ID="menubarright" runat="server">
        </asp:ContentPlaceHolder>
    </div>
       <div class='clear'></div>
    </div>

还有你的新样式表

   div.menubar{
    width:100%;/*or width:1024px; according to your page*/
   }
   div.clear{
      clear:both;
   }

 div.menuleft
 {
    float: left;
    width:30%;
  /*  text-align:left;*/
 }

div.menuright
 {
    float: right;
    width:30%;
    /*text-align:right;*/
 }

 div.menucenter
 {
   float: left;
    width:auto;/*not auto*/
   max-width:39% /* 100%-30%-30%=40% but you'd better put 39%*/
   /* text-align:center;*/
 }

【讨论】：

【解决方案2】：

我认为您想对您的 css 进行以下更改：

div.menuright 应该是 float:left 而不是 right 和 div.menucenter 应该有一个百分比宽度（width: 30%）。

希望这会有所帮助。

【讨论】：