ASP菜單浮動屬性不起作用

Question

我有一個asp菜單，我想將它浮動到左邊，以便它後面的元素可以到達它的右側（旁邊）。我爲Menu設置了CssClass，並將其添加了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; 
} 

內部控制ContentPlaceHolder（這將是從這個母版頁繼承頁）一定要來的權利菜單，但這些都是在它下面。

我搜索了很多，但沒有什麼工作，我甚至已經檢查可用的解決方案在這裏：

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

asp Menu control not floating properly

誰能告訴我怎麼解決這個問題呢？

謝謝。

Answer 1

將菜單包裝在div中並關閉內容佔位符前的div。將您的CSS類從菜單移動到容器格。

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; 
    }