问题描述
我有一个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-top和padding-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;
}
这篇关于锚标签填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！