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

我将如何放置/定位/对齐文本“养牛场”，使其距离左侧20px，距离底部20px，使得它不会在视觉上打破视觉效果，即使在用Firebug看。

Answer 1

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

<强> CSS ：

#header {
  position: relative;

  width: 960px;
  height: 200px;
}

#header a {
  position: absolute;

  bottom: 20px;
  left: 20px;
}

Answer 2

您只需向锚点添加<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;
}

编辑：

另外，在标题中添加overflow：hidden。

#header {
overflow: hidden;
}

Answer 3

我建议带走100％的宽度和高度。通过这样做，您将能够将其放在标题中。如果不这样做，则会扩展到标题的大小，因此无法更改展示位置。

由于它是一个块元素，你可以通过几种方式实现。您可以使用保证金将其“推”出其他元素（如果您决定在其上添加更多元素）。或者你可以使用“position：relative”和“top”或“left”。我建议使用％和％。我尝试了这个代码，它实现了你想要的效果我想：

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

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

Answer 4

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

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