我正在使用Notepad ++练习HTML和CSS技能，当我在页脚中添加几个链接时遇到了问题。我遇到的问题是每个链接都包含15px的margin-right值（即，可以单击每个链接之间的空白）。我希望只能单击这些单词以将我定向到该特定页面。
这是我的页脚HTML代码：
<body>
<div id="footer">
<div id="footerlinks">
<a href="index.html">
<span style="color: #FFFFCC">
<p class="footerlink">
HOME
</p>
</span>
</a>
<a href="about.html">
<p class="footerlink">
ABOUT
</p>
</a>
<a href="rooms.html">
<p class="footerlink">
ROOMS
</p>
</a>
<a href="divesite.html">
<p class="footerlink">
DIVE SITE
</p>
</a>
<a href="food.html">
<p class="footerlink">
FOOD
</p>
</a>
<a href="news.html">
<p class="footerlink">
NEWS
</p>
</a>
<a href="contact.html">
<p class="footerlink">
CONTACT
</p>
</a>
</div>
</div>
</body>
这是我的页脚CSS：
#footer {
width: 100%;
height: 50px;
background-color: #999999;
border-bottom: 1px solid black;
padding-right: 20px;
padding-left: 20px;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#footerlinks {
height: 100%;
line-height: 45px;
display: inline-block;
float: left;
}
#footerlinks a {
color: #333333;
}
#footerlinks a:link {
text-decoration: none;
}
#footerlinks a:hover {
color: #FFFFCC;
}
.footerlink {
font-size: 14px;
vertical-align: center;
margin-right: 15px;
display: inline;
}
这是我的JSFiddle- https: //jsfiddle.net/vu4qg17c/2/
我只在JSFiddle中包括了HTML和CSS代码的必要部分。先感谢您。
代替
<a href="about.html">
<p class="footerlink">
ABOUT
</p>
</a>
反转的位置<a>和<p>
<p class="footerlink">
<a href="about.html">
ABOUT
</a>
</p>
在其他所有步骤中也要这样做。
<a>之前<p>的写作使整体<p>成为一个链接。并且，由于<p>具有一些默认填充，因此没有文本的区域也可以单击。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句