2016-08-11 102 views
0

我有一个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-toppadding-bottom正在设置。左侧和右侧的填充没有出现。我试过设置padding: 15px 15px 15px 15px;但这也行不通。

这里是生成的来源。正在自动生成/* <![CDATA[ */https://jsfiddle.net/q2Lcrgux/

+1

我没有看到一个锚标记在你的代码!你可以发一些小提琴吗? –

+0

Asp.net处理母版页,菜单项转换为锚标签。这里是生成的源https://jsfiddle.net/q2Lcrgux/ –

+1

好的,这对我来说很好! –

回答

2

锚标签是内联元素。填充不会使用内联元素。您必须将其作为块元素。让他们内联块必须工作。 http://jsfiddle.net/LinkinTED/4d7q6gwp/

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

风格:

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

虽然这段代码可以解决这个问题,但[包括解释](// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)确实有助于提高您的帖子的质量。请记住,您将来会为读者回答问题,而这些人可能不知道您的代码建议的原因。也请尽量不要使用解释性注释来挤占代码,因为这会降低代码和解释的可读性! – FrankerZ