html - 在 div 中定位锚文本

Question

鉴于标记

<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;
}

我应该如何放置/定位/对齐文本“cattle farms”，使其位于距左侧 20px 和距底部 20px 的位置，即使在查看时也不会在视觉上破坏 div 的 a萤火虫。

score 1 · Accepted Answer

您需要position: relative在父容器上指定：

CSS：

#header {
  position: relative;

  width: 960px;
  height: 200px;
}

#header a {
  position: absolute;

  bottom: 20px;
  left: 20px;
}

score 1 · Accepted Answer

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

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

并添加这些额外的样式：

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

编辑：

另外，在标题中添加溢出：隐藏。

#header {
overflow: hidden;
}

score 0 · Accepted Answer

我建议去掉 100% 的宽度和高度。通过这样做，您将能够将其放置在标题中。如果不这样做，您将被扩大到标题的大小，因此没有空间来更改您的展示位置。

由于它是一个块元素，因此您可以通过几种方式执行此操作。您可以使用边距将其“推”离其他元素（如果您决定在其之上添加更多）。或者您可以使用“位置：相对”和“顶部”或“左侧”。我建议将其与 % 一起使用。我尝试了这段代码，它达到了我认为你想要的效果：

#header{
width: 960px;
height: 200px;
}

#header a {
display: block;
position: relative;
top: 95%;
}

score 0 · Accepted Answer

好。我不知道为什么会这样。但它确实

div#header a
{
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}

4 回答 4