2012-09-11 160 views
0

我正在使用Asp菜單製作垂直導航欄。我試圖將寬度設置爲100%,但它保持原樣。ASP菜單寬度未設置爲100%

這是我正在使用的代碼。

<div id="leftcolumn" > 
<asp:Menu ID="Menu1" runat="server" CssClass="Menu" RenderingMode="List"> 
<Items> 
<asp:MenuItem Text="Inbox" Value="inbox"></asp:MenuItem> 
<asp:MenuItem Text="Processing"></asp:MenuItem> 
<asp:MenuItem Text="aslkdjf"></asp:MenuItem> 
<asp:MenuItem Text="aslkdjf"></asp:MenuItem> 
<asp:MenuItem Text="aslkdjf"></asp:MenuItem> 
</Items> 
</asp:Menu> 
</div> 

這是Div的CssClass(左列)!

#leftcolumn{ 
float: left; 
width: 200px; /*Width of left column*/ 
margin-left: -100%; 
background: #C8FC98;} 

這裏是CSS類菜單

.Menu 
{ 
font-family: 'Open Sans', sans-serif; 
font-size: 13px; 
width:auto; 
} 

.Menu ul 
{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ 
} 

.Menu ul li 
{ 
padding-bottom: 2px; /*bottom spacing between menu items*/ 

} 

.Menu ul li a 
{ 
color: black; 
background: #E9E9E9; 
display: block; 
padding: 5px 0; 
line-height: 17px; 
padding-left: 8px; /*link text is indented 8px*/ 
text-decoration: none; 
} 

.Menu ul li a:hover 
{ 
    background-image: none; 
    color: white; 
    background: black; 
} 

這是菜單。

Vertical Menu

我需要用ASP:菜單控制,因爲我有訪問控制在服務器端,並進行更改動態。

你能幫幫我嗎?

+0

爲什麼你設置了'width:auto;',如果你想拉伸,設置'width:100%;' – ygssoni

+0

我也試過了。但沒有變化 –

+0

你可以發佈呈現的HTML而不是asp代碼嗎? – hsalama

回答

2
Menu ul li 
{ 
    width:150px !important; 
    padding-bottom: 2px; /*bottom spacing between menu items*/ 
} 

我增加了Width屬性和定義的固定長度的。那麼我的問題就解決了。

0

以下代碼可能對您有所幫助。我已經檢查與Firebug的輸出在Firefox

#leftcolumn 
    { 
     float: left; 
     width: 600px; /*Width of left column*/    
     background: #C8FC98; 
    } 

    .Menu 
    { 
     font-family: 'Open Sans' , sans-serif; 
     font-size: 13px; 
     width: 100%; 
     float:left; 
    } 

    .Menu ul 
    { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ 
     width:100% !important; 
    } 

    .Menu ul li 
    { 
     padding-bottom: 2px; /*bottom spacing between menu items*/ 
     float:left; 
     line-height:40px; 
    }