1

このウェブサイト: http://www.bestcastleintown.co.uk/pg/

タグを<div class="awards_square_home">入れ子にしてパディングを追加することで、それぞれの色付きの領域をクリック可能なリンクにしようとしています。ただし、既にパディングを使用してを配置しています。このルールのパディングを使用すると、次のようになります。<a><div><div><a>

.awards_square_home {
    border: 10px solid rgb(195, 195, 195);
    height: 90px;
    margin-bottom: 20px;
    padding: 90px 20px 20px;
}

要素にパディングを追加すると、div の色付き領域全体をクリック可能にするという、希望する方法でパディングが広がりません。

.awards_square_home a {
    padding: 120px 0 20px;
}

私は の<a>この領域を埋めることから を作ろうとしてい<div>ます:

ここに画像の説明を入力

4

5 に答える 5

0

親<div>で背景/パディング/高さを設定する代わりに、<a>要素を div のように動作するように設定し、代わりにそれらを設定することができます:

a {
  display: block;
  background-image: url("../images/icons/globe_v3.gif");
  background-repeat: no-repeat;
  background-position: 50% 15%;
  padding: 95px 20px 20px 20px;
  height: 90px;
}

これらのプロパティを現在存在する場所から削除することを忘れないでください。

于 2013-04-18T09:25:27.223 に答える
0

CSSを次のように修正することで、問題を修正したと思います。

.awards_square_home {    
    border: 10px solid #c3c3c3;     
    height: 200px;
    margin-bottom: 20px;
}

.awards_square_home a {
    display:block;
    padding: 90px 0px 20px 0px;
}
于 2013-04-18T09:21:13.447 に答える
0

私があなたを誤解していなければ、テキストだけではなく、すべての div をクリックできるようにしたいでしょう。

<a href="#" class="text220 centertext capitalise_text home_feature_turqoise NG">
    <div class="awards_square_home turqoise podium">
        <span>Best</span>
        <span>University</span>
        <span>Campaign</span>
    </div>
</a>

ここでフィドル

于 2013-04-18T09:12:21.430 に答える