锚标签填充 [英] Padding for anchor tag

查看:71
本文介绍了锚标签填充的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个asp.net页面,其代码如下所示.

I have a asp.net page with the code as shown below.

<%@ 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.左右的空白不出现.

I've applied padding for anchor tag. But only padding-top and padding-bottom are being set. The padding of left and right are not appearing.

我尝试设置padding: 15px 15px 15px 15px;,但这也行不通.

I've tried to set padding: 15px 15px 15px 15px; but that also doesn't work.

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

Here is the generated source. /* <![CDATA[ */ is being generated automatically. https://jsfiddle.net/q2Lcrgux/

推荐答案

Anchor标记是一个内联元素.填充无法与内联元素一起使用.您必须将其作为块元素.使它们内联块必须起作用. http://jsfiddle.net/LinkinTED/4d7q6gwp/

Anchor tag is an Inline element. Padding wont work with Inline Element. You have to make it as block element. Making them inline-block must work. http://jsfiddle.net/LinkinTED/4d7q6gwp/

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

样式:

a
{
    display:inline-block;
}

这篇关于锚标签填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆