2013-06-20 3 views
2

Я хотел бы дать пробел между пунктом меню asp.net. Следовательно, я попытался использовать атрибут staticmenuitemstyle и horizontalpadding="10", который был предложен другим сообщением в SO. Но это не работает.Пункт меню между пунктами меню не работает в asp.net

<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> 
+0

Какая версия .NET Framework вы используете? Элемент управления меню отображается как «ul» в 4.0 и как «таблица» в предыдущих версиях. С учетом сказанного вы можете управлять интервалом через CSS соответственно. – juanreyesv

+0

Я использую .NET Framework 4.0. @juanreyesv, пожалуйста, дайте мне знать, как я могу обрабатывать CSS? – Smaug

ответ

2

Вы можете использовать CSS Selectors для достижения этой цели

В своем коде вы asigned атрибут CssClass к вашему 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. Вы можете удалить его, если хотите.

Надеюсь, это вам поможет

Смежные вопросы