我有一个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
谁能告诉我如何解决这个问题?
谢谢。
答案 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;
}