菜单项之间的项目空间在asp.net中不起作用

时间:2013-06-20 04:38:33

标签: c# asp.net aspmenu-control

我想在asp.net菜单项之间添加一个空格。因此,我尝试使用staticmenuitemstylehorizontalpadding="10"属性,这是SO中其他帖子建议的。但是,它没有用。

<staticmenuitemstyle horizontalpadding="10" />

请告诉我如何在菜单项之间留出空间?

我的代码::

 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
           EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal" 
           BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" 
           Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px">
      <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
      <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
      <DynamicMenuStyle BackColor="#F7F6F3" />
      <DynamicSelectedStyle BackColor="#5D7B9D" />
      <staticmenuitemstyle horizontalpadding="10" />
      <Items>
          <asp:MenuItem NavigateUrl="~/WebPages/Default.aspx"  Text="Support1">
          <asp:MenuItem NavigateUrl="~/WebPages/Default2.aspx"  Text="Support2">
      </Items>
</asp:Menu>

1 个答案:

答案 0 :(得分:3)

您可以使用CSS Selectors来实现

在您的代码中,您已将CssClass属性设为您的Menu控件。利用名为“menu”的CSS类并在页面中覆盖它(稍后可以将其移动到css文件中)。因此,请在<head>

中将其添加到您的页面
<style type="text/css">
    .menu li ~ li
    {
        padding-left: 100px; /* selects every <li> element that are preceded by a <li> element. */
        list-style:none;
    }

    .menu ul > li:first-child
    {
        font-size:20px;/* this one will select the first element of your menu */
    }
</style>

请注意,我添加了.menu ul > li:first-child选择器,因此您不会在菜单的第一个元素上获得左边距,我只是更改了font-size以便为您提供CSS控件的示例选择器提供。如果您愿意,可以将其删除。

希望这有助于你