带有下拉箭头的ASP.NET菜单间距问题

时间:2011-10-19 15:53:26

标签: c# asp.net

我有一个ASP.NET菜单,对于包含下拉菜单的项目,它会在新的<td>中显示一个箭头,问题是间距太大了。如何点击<TD>或缩小菜单文本与箭头之间的间距?

菜单问题的屏幕截图:enter image description here

HTML输出:

<td style="white-space:nowrap;">
<a class="ctl00_itemMenu_1 StaticMenuItemStyle ctl00_itemMenu_3" style="border-style:none;font-size:1em;" href="Default.aspx">&nbsp;Home&nbsp;&nbsp;</a>
</td>
<td style="width:0;">
<img style="border-style:none;vertical-align:middle;" alt="Expand Home" src="Images/menu_arrow.gif">
</td>

菜单控制:

<asp:Menu ID="itemMenu" SkinID="MenuSkin" runat="server" Orientation="Horizontal"
            CssClass="menu" DynamicItemFormatString="&nbsp;{0}&nbsp;&nbsp;" StaticItemFormatString="&nbsp;{0}&nbsp;&nbsp;"
            StaticEnableDefaultPopOutImage="true" StaticPopOutImageUrl="~/Images/menu_arrow.gif"
            DynamicPopOutImageUrl="~/Images/menu_arrow_dynamic.gif" DynamicEnableDefaultPopOutImage="true" 
            MaximumDynamicDisplayLevels="5">
            <StaticMenuStyle CssClass="StaticMenuStyle" />
            <StaticMenuItemStyle Width="100%" CssClass="StaticMenuItemStyle" />
            <StaticHoverStyle CssClass="StaticHoverStyle" />
            <DynamicMenuStyle CssClass="DynamicMenuStyle" />
            <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" Width="100%" />
            <DynamicHoverStyle CssClass="DynamicHoverStyle" />
        </asp:Menu>

CSS:

.menu
{
padding: 0px 0px 0px 7px;
margin:0px;
}

.StaticMenuStyle a, .StaticMenuStyle a:visited, .StaticMenuStyle a:active, .StaticMenuStyle a:hover
{
color: #ffffff;     
text-decoration: none;
padding: 3px 9px 3px 9px;   
height: 100%;               
display: table;     
font-weight: bold;      
font-family: Tahoma, Arial; 
}

 .DynamicMenuStyle a, .DynamicMenuStyle a:visited, .DynamicMenuStyle a:active,    .DynamicMenuStyle a:hover 
{
color: #ffffff;     
text-decoration: none;
padding: 7px 9px 7px 9px;
width: 100%;    
height: 100%;               
display: table;         
font-weight: bold;  
font-family: Tahoma, Arial; 
}

.StaticMenuStyle td
{
font-weight: normal;
height: 100%;
font-size: 11px;
border-collapse: collapse;
/*cursor: pointer;*/    

}

.DynamicMenuStyle table
{
border-collapse: collapse;  
border-spacing: 0px;
}

.DynamicMenuStyle td
{
border: solid 1px #ffffff;  
font-weight: normal;
width: 100%;
height: 100%;
/*cursor: pointer;*/    
background-color: #333333;      
border-collapse: collapse;  
border-spacing: 0px;
font-size: 11px;
}

.DynamicMenuStyle td table tr td
{
border: solid 0px #ffffff;
padding: 7px 4px;


    }

.StaticMenuItemStyle td
  { 

padding: 7px 0px 7px 0px;

border: 0px solid #ffffff;
font-weight: normal;        
text-align: left;   
  }


.StaticHoverStyle td, .DynamicHoverStyle td
{
background-color: #5c5c5c;
font-weight: bold;  
}

.StaticSelectedStyle, .DynamicSelectedStyle
{
font-weight: normal;
cursor: pointer;
}

0 个答案:

没有答案