ASP菜单浮动属性不起作用

时间:2015-11-11 16:17:28

标签: html css asp.net css-float aspmenu

我有一个asp菜单,我想将它浮动到左边,因此它之后的元素可以到达它的右侧(旁边)。我为CssClass设置了Menu并为其添加了float: left,但它无效。我甚至将float:left更改为float:right以查看它是否有效,但没有任何效果。

这是我的代码:

 <form id="form1" runat="server">
        <div class="wrapper">
        <div class="navbar">


        /*some code*/

     </div>

    <div class="middle"> 



    <asp:Menu ID="MenuRec" runat="server" CssClass="recFriends">
         <Items>
            <asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
            <asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>

        </Items>

         <Items>
            <asp:MenuItem Text=" Item1"  Selectable="false"></asp:MenuItem>
            <asp:MenuItem Text=" Item2"  Selectable="false"></asp:MenuItem>
             <asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
        </Items>
    </asp:Menu>



          <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            <!--here goes the customized content--> 
        </asp:ContentPlaceHolder>

  </div>
     <div class="footer">

    </div>
</div>
</form>

</body>

我的CSS:

.recFriends {

    float:left;  
    padding-top:1em;
    color:#003366; 
    font-weight:normal;
    font-style:italic; 
}
{p}内部的{p>控件(它将位于从此母版页继承的页面中)必须位于菜单的右侧,但这些控件位于其下方。

我搜索了很多,但没有任何效果,我甚至检查了这里提供的解决方案:

CssClass is not working for my asp menu - all code attached

asp Menu control not floating properly

谁能告诉我如何解决这个问题?

谢谢。

1 个答案:

答案 0 :(得分:1)

将菜单包装在div中并在内容占位符前关闭div。将CSS类从菜单移动到容器div。

<强> HTML

  <div class="recFriends">
            <asp:Menu ID="MenuRec" runat="server">
                <Items>
                    <asp:MenuItem Text="People you may know:" Selectable="false" Enabled="false"></asp:MenuItem>
                    <asp:MenuItem Text="<br/>" Selectable="false" Enabled="false"></asp:MenuItem>

                </Items>

                <Items>
                    <asp:MenuItem Text=" Item1" Selectable="false"></asp:MenuItem>
                    <asp:MenuItem Text=" Item2" Selectable="false"></asp:MenuItem>
                    <asp:MenuItem Text=" Item3" Selectable="false"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
            <!--here goes the customized content-->
        </asp:ContentPlaceHolder>

CSS

 .recFriends {
        float: left;
        padding-top: 1em;
        color: #003366;
        font-weight: normal;
        font-style: italic;
        width: 20%;
        padding-left: 2em;
    }

Sample