我有一个ASP.NET菜单,对于包含下拉菜单的项目,它会在新的<td>
中显示一个箭头,问题是间距太大了。如何点击<TD>
或缩小菜单文本与箭头之间的间距?
菜单问题的屏幕截图:
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"> Home </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=" {0} " StaticItemFormatString=" {0} "
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;
}