Question

我有一个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/

Answer 1

锚标记是一个内联元素。填充不适用于内联元素。你必须把它作为块元素。使它们成为内联块必须有效。 http://jsfiddle.net/LinkinTED/4d7q6gwp/

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

风格：

a
{
    display:inline-block;
}

Answer 2

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

Answer 3

如果将其显示为块或行内块对您不起作用，请尝试在锚标签中放置<p>标签，并在<p>标签中添加边距或填充：

<a href="https//www.google.com"><p style="margin: 20px;"></p></a>

用于锚标记的填充

3 个答案: