앵커 태그 용 패딩

아래와 같이 코드가있는 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입니다. –

앵커 태그는 인라인 요소입니다. 패딩은 인라인 요소로 작동하지 않습니다. 블록 요소로 만들어야합니다. 이들을 인라인 블록으로 만드는 것은 효과가 있어야합니다. 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

앵커 태그 용 패딩

답변

관련 문제