0

div 内にアンカーを配置して、ボタンである div を作成しようとしています。

HTML

<div class="div1" style="width:300px;">
    <a href="#">hello</a>                        
</div>

CSS

.div1 {
    background-color:red;
    color:white;
    margin:5px;
    border-width:5px;
    border-style:solid;
    padding:10px;
    border-radius:5px;
    text-align:center;
    background: #494949 !important;
}

JSFiddle: http://jsfiddle.net/BzFyS/

単純な何かがポジショニングに欠けているため、機能していないと思います。任意のヒント？

ありがとう

4

5 に答える 5

3

最も簡単な方法: これを追加しますcss:

.div1 a {
    display: block;
}

それでおしまい。

div全体(領域を含む) をクリック可能にしたい場合padding:

.div1 {
    background-color:red;
    color:white;
    margin:5px;
    border-width:5px;
    border-style:solid;
    padding:0px; /* set to 0 */
    border-radius:5px;
    text-align:center;
    background: #494949 !important;
}
.div1 a {
    display: block;
    padding:10px;
}

デモ: http://jsfiddle.net/BzFyS/2/

于 2013-08-17T16:41:40.477 に答える
2

div 全体をクリック可能にしたい場合は、次のようにします。

HTML

<div id="div1" style="width:300px;">
    <a href="#">hello</a>                        
</div>

CSS

#div1 {
    background-color:red;
    color:white;
    margin:5px;
    border-width:5px;
    border-style:solid;
    padding:10px;
    border-radius:5px;
    text-align:center;
    background: #494949 !important; /* do you really need that ? */
    cursor: pointer;
}

JavaScript

document.getElementById('div1').onclick=function(){
      // do something
}

aしかし、その要素は本当に必要ありません。

デモンストレーション

于 2013-08-17T16:40:02.860 に答える
1

CSS に追加してみてください:

.div1 a {
    display: block;
}
于 2013-08-17T16:42:32.760 に答える
0

次のように div の周りにタグを配置する必要があります。

<a href="#"><div class="div1" style="width:300px;">
    <p>hello</p>                    
</div></a>

これは機能します。

于 2013-08-17T16:39:58.610 に答える