锚标记的填充答案

【问题标题】：Padding for anchor tag锚标记的填充
【发布时间】：2016-08-11 03:59:38
【问题描述】：

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

【问题讨论】：

我在您的代码中没有看到锚标记！你能发一些小提琴吗？
Asp.net 处理母版页并将菜单项转换为锚标记。这是生成的源jsfiddle.net/q2Lcrgux
好吧，这对我来说很好！
是的，它有效。我什至尝试过使用 IE。 ;)

标签： html css asp.net padding

【解决方案1】：

Anchor 标签是一个内联元素。填充不适用于内联元素。您必须将其设置为块元素。使它们成为内联块必须有效。 http://jsfiddle.net/LinkinTED/4d7q6gwp/

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

风格：

a
{
    display:inline-block;
}

【讨论】：

【解决方案2】：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性 cmets 挤满你的代码，因为这会降低代码和解释的可读性！

【解决方案3】：

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

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

【讨论】：