1

http://www.travenwest.com/projects/dev2に取り組んでいる Web サイト テンプレートがあり、左側の拡張ボックスに問題があります (少なくとも、複数の問題の 1 つです)。他のウェブページへのリンクにしたいのですが、250pxから100%に拡大したボックス全体をリンクにする方法はないかと考えていました。現在、基本的なリンクに「Hey」を設定しているだけですが、先ほど<a href="http://google.com>Hey</a>言ったように、ボックス全体を展開してリンクにしたいと考えています。また、jQuery や JavaScript などの経験がまったくないので、HTML/CSS で保存したいと思います。ありがとうございます。

4

2 に答える 2

2

これをCSSに追加するだけです

#box a{    
    display:block;
    width:100%;
    height:80px;
    position:relative;
    z-index:1;
    line-height: 80px
}

デモ: http://jsfiddle.net/enve/fur5D/1/

于 2013-04-28T21:48:49.703 に答える
1

アンカー タグに次のスタイルを指定します。

a {
    width: 100%;
    height: 100%;
    display: block;
}

また、<center>タグを使用してテキスト リンクを配置しないでください。classボックスに次のような一致を与える必要があります。これにより、複数の 's.box に対して同じ CSS を繰り返す必要がなくなり、CSS ファイル内のすべてのボックスをターゲットにすることができます。ID

.box {
    width: 250px;
    height: 80px;
    border-bottom: 3px solid #000000;
    border-right: 3px solid #000000;
    transition: width 5s;
    -webkit-transition: width 2s;
    text-align: center;
}

.box:hover {
    width: 100%;
    border: 3px solid #000000;
}

追加text-align: center;すると、追加のマークアップを必要とせずにリンク テキストが中央に配置されます

于 2013-04-28T21:49:19.987 に答える