2015-12-23 76 views
0

我是asp.net的新手。如何以線性方式對齊菜單和菜單項。我在菜單項的屬性中找不到任何樣式。請幫幫我。如何更改asp.net中菜單的對齊方式

在下圖中,菜單項不正確。如何將它們放置在正確的格式 enter image description here

        <asp:Menu ID="minimenu" OnMenuItemClick="mini_MenuItemClick" CssClass="portfolio-item" runat="server" Orientation="Horizontal"> 
            <Items> 
             <asp:MenuItem Text="MINI" Value="mini" Selectable="false"> 
              <asp:MenuItem Text="ECE/EIE" Value="sdaad" Selectable="false"> 
               <asp:MenuItem Text="Embedded Systems" Value="embeddedMiniMenu"></asp:MenuItem> 
               <asp:MenuItem Text="VLSI" Value="vlsiMiniMenu"></asp:MenuItem> 
               <asp:MenuItem Text="DSP/DIP" Value="dipMiniMenu"></asp:MenuItem>              
              </asp:MenuItem> 
              <asp:MenuItem Text="EEE" Value="qwerty" Selectable="false"> 
               <asp:MenuItem Text="Core Embedded" Value="coreEmbeddedMiniMenu"></asp:MenuItem> 
               <asp:MenuItem Text="Mat Lab  " Value="matlabMini"></asp:MenuItem> 
              </asp:MenuItem> 
              <asp:MenuItem Text="CSE & IT" Value="qwerty" Selectable="false"> 
               <asp:MenuItem Text="Java" Value="javaMiniMenu"></asp:MenuItem> 
               <asp:MenuItem Text="Dot Net" Value="dotnetMiniMenu"></asp:MenuItem> 
               <asp:MenuItem Text="Andriod" Value="andriodMiniMenu"></asp:MenuItem> 
              </asp:MenuItem> 
              <asp:MenuItem Text="MECH" Value="qwerty" Selectable="false"> 
               <asp:MenuItem Text="Simulation" Value="simulationMiniMenu"></asp:MenuItem> 
               <asp:MenuItem Text="Hardware Projects" Value="hardwareMiniMenu"></asp:MenuItem> 
              </asp:MenuItem> 
              <asp:MenuItem Text="Civil" Value="civilMiniMenu"></asp:MenuItem> 
             </asp:MenuItem> 
            </Items> 
           </asp:Menu> 

回答

3

你需要看的是作用於這些元素是什麼CSS規則。我發現菜單的拱形風格是「組合項目」。您正在使用一些第三方CSS框架。

假設你熟悉CSS(不必是專家)我想看看元素,看看規則行事就可以了什麼..

我喜歡使用Chrome的開發者工具。通過右鍵單擊元素並選擇檢查開始。然後在屏幕的右側/底部,它應該顯示應用於該元素的所有CSS規則,以及哪些規則正在覆蓋其他元素。

Image of Chrome's context menu selecting an element on a web page, focusing on the Inspect option.

Displaying Chrome's CSS Style's in the developer tools.

利用這一點,你可以找出是什麼原因造成,並解決這個問題的最好辦法。

1

如果您通過螢火蟲或開發者工具檢查你會發現有一個像 顯示一些問題 其純粹的CSS問題:inlineBlock。 浮動:左/右 寬度:汽車

...

相關問題