0

マークアップを考えると

<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ピクセルの位置に配置/配置/配置して、ファイアバグ。

4

4 に答える 4

1

<span>アンカーに a を追加し、それにパディングを追加するだけです。このような：

<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;
}
于 2012-08-17T00:21:56.073 に答える
1

position: relative親コンテナーで指定する必要があります。

CSS :

#header {
  position: relative;

  width: 960px;
  height: 200px;
}

#header a {
  position: absolute;

  bottom: 20px;
  left: 20px;
}
于 2012-08-17T00:16:06.663 に答える
0

上手。なぜこれが機能するのかわかりません。しかし、それはします

div#header a
{
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}
于 2012-08-17T00:51:56.400 に答える
0

100% の幅と高さを取り除くことをお勧めします。これにより、ヘッダー内に配置できるようになります。そうしないと、ヘッダーのサイズまで拡大されるため、配置を変更する余地がありません。

これはブロック要素なので、いくつかの方法でこれを行うことができます。マージンを使用して、他の要素から「プッシュ」することができます (その上にさらに追加することにした場合)。または、「position: relative」と「top」または「left」を使用できます。これを % で使用することをお勧めします。このコードを試してみたところ、あなたが探していた効果が得られたと思います:

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

#header a {
display: block;
position: relative;
top: 95%;
}
于 2012-08-17T00:22:37.673 に答える