0

次のようなメニューがあります。アンカー領域全体をクリック可能にする必要がありますが、残念ながらそれはないようです。

HTML

<div><a href='#'>Home</a></div>    
<div><a href='#'>Contact us</a></div>    
<div><a href='#'>Feedback</a></div>    
<div><a href='#'>Products</a></div>

CSS

div {height:40px; padding-top:5px; border:#999 solid 1px; margin-bottom:5px;}
a{color:#FFF; font-size:15px;text-shadow: -1px -2px 2px #212121; filter: dropshadow(color=#212121, offx=-1, offy=-2); padding: 13px 0 0 16px; display:block; height:25px; width:100%; zoom:1; line-height: 30px;  }

http://jsfiddle.net/3Hyty/2/としてフィドル

更新：IEで本当に問題

4

4 に答える 4

0 
a{
  margin:0 10px;
  display:block;
  float:left;
  width:100%;
  color:#F00; 
  font-size:15px;
  text-shadow: -1px -2px 2px #212121; padding: 0 0; 
  height:25px; 
  zoom:1; 
  line-height: 30px;
}

フロート左で出来ました

于 2013-01-08T14:08:14.760 に答える
0

HTML5 では、アンカー内にブロック要素を含めることができます。これにより、アンカーはその中のブロック要素の寸法に強制されます。または、スパンを使用してインライン ブロックまたはブロックのスタイルを設定します。

<a href='#'><div>Home</div></a>

また：

<a href='#'><span class="block">Home</span></a>

<style>
span.block {display: block;}
</style>
于 2013-01-07T17:20:36.570 に答える
0

あなたのCSSは問題ありません。問題は、新しいタブで開かない限り、jsfiddleがリンクのクリックをデフォルトでブロックすることです。リンクを作成する

target='_blank'

ここに示すように、jsfiddle で動作します: http://jsfiddle.net/V3qML/1/。

明らかに、本番環境ではコードをそのまま使用してください:)

于 2013-01-07T17:14:34.337 に答える
0

onClick を div に追加し、ブラウザーに応じて cursor:hand または cursor:pointer を使用するように div のスタイルを設定します。

jsFiddle に適用: http://jsfiddle.net/3Hyty/5/

運用ラインは次のとおりです。

<div onClick="javascript:document.location.href='#';" style="cursor:hand;cursor: pointer;">Feedback</div>
于 2013-01-07T17:14:38.660 に答える