Прокладка для якорной метки

У меня есть страница asp.net с кодом, как показано ниже.Прокладка для якорной метки

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

    <!DOCTYPE html> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 

    <head runat="server"> 
    <title></title> 
    <asp:ContentPlaceHolder id="head" runat="server"> 
    </asp:ContentPlaceHolder> 
    <style> 
     body { 
     margin: 0px; 
     } 
     header, 
     footer { 
     background-color: black; 
     color: white; 
     padding: 20px; 
     text-align: center; 
     } 
     header { 
     position: fixed; 
     top: 0; 
     width: 100%; 
     } 
     header li { 
     display: inline-block; 
     border: 1px solid rgb(0, 153, 255); 
     background-color: dodgerblue; 
     } 
     header li:hover { 
     background-color: white; 
     } 
     header a { 
     text-decoration: none; 
     color: white; 
     padding: 15px; 
     } 
     header a:hover { 
     color: dodgerblue; 
     } 
    </style> 
    </head> 

    <body> 

    <form id="form1" runat="server"> 
     <div> 
     <header runat="server"> 
      <h1>Welcome to SAIC</h1> 
      <asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal"> 
      <Items> 
       <asp:MenuItem Value="Home" NavigateUrl="~/Home.aspx"></asp:MenuItem> 
       <asp:MenuItem Value="Login" NavigateUrl="~/Login.aspx"></asp:MenuItem> 
       <asp:MenuItem Value="Add Products" NavigateUrl="~/Add Products.aspx"></asp:MenuItem> 
       <asp:MenuItem Value="View Product Details" NavigateUrl="~/View Product Details.aspx"></asp:MenuItem> 
      </Items> 
      </asp:Menu> 
     </header> 
     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

     </asp:ContentPlaceHolder> 
     </div> 
     <footer> 
     <p>Copyrights @ 2016</p> 
     </footer> 
    </form> 
    </body> 

    </html>

Я применил прокладку для якорной метки. Но устанавливаются только padding-top и padding-bottom. Отступы слева и справа не отображаются.

Я попытался установить padding: 15px 15px 15px 15px;, но это также не работает.

Вот генерируемый источник. /* <![CDATA[ */ производится автоматически. https://jsfiddle.net/q2Lcrgux/

источник

2016-08-11 prathapa reddy

Я не вижу якорный тег в коде! можете ли вы опубликовать какую-нибудь скрипку? –

Asp.net обрабатывает главную страницу, и элементы меню преобразуются в теги привязки. Вот сгенерированный источник https://jsfiddle.net/q2Lcrgux/ –

ok, который отлично работает для меня! –

Якорный тег - это элемент Inline. Отступы не будут работать с Inline Element. Вы должны сделать это как элемент блока. Создание их встроенного блока должно работать. http://jsfiddle.net/LinkinTED/4d7q6gwp/

<a href="#" style="display:block;padding:10px">Click here</a>

Стиль:

a 
{ 
    display:inline-block; 
}

источник

2016-08-11 06:23:53

a{ 
display:block; 
padding:15px; 
}//Use This Is inline Element That's Why You Need This Code Try It Once

источник

2016-08-11 06:28:15

Хотя этот фрагмент кода может решить вопрос, [включая объяснение] (// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. Также попробуйте не толковать код с пояснительными комментариями, так как это уменьшает читаемость кода и объяснений! – FrankerZ

Прокладка для якорной метки

ответ

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