在div中定位锚文本 [英] positioning text of anchor within a div

问题描述

给出标记

<div id="header">
<a href="cattle.html" class="current">Cattle Farms</a>
</div>

和样式

#header
{
width: 960px;
height: 200px;
margin-bottom: 20px;
}

#header a
{
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}

我该如何去放置/定位/对齐文本牛场"，使其位于左侧20像素和底部20像素的位置，这样即使在视觉上也不会在视觉上使a脱离div用Firebug查找它.

How whould I go about placing/positioning/aligning the text "cattle farms" so that it sits 20px from the left and 20px from the bottom in such a manner that it does not break the a out of the div visually even when looking it with Firebug.

推荐答案

您可以简单地将<span>添加到锚点并为其添加一些填充.像这样:

You could simply add a <span> to the anchor and add some padding to that. Like this:

<div id="header">
  <a href="cattle.html" class="current"><span>Cattle Farms</span></a>
</div>

并添加以下其他样式:

#header a span {
padding-left: 20px;
padding-bottom: 20px;
}

此外，在标头中添加溢出:隐藏.

Also, add overflow: hidden to the header.

#header {
overflow: hidden;
}

这篇关于在div中定位锚文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！