2

I have tried as the following

<div class="tag">
 <a href="#">Book Form</a>
</div>

in css

.tag a 
{ 
  background-color:#899898;
  height:125px;
  width:250px;
  color:#000;
  font-family:Arial;
  font-size:25px;
}

The issue is that height and width of anchor doesn't change. Please help me

4

4 に答える 4

23

display: inline-block;cssに追加します。

<div class="tag">
 <a href="#">Book Form</a>
</div>

CSSで

.tag a 
  { 
  display: inline-block;      
  background-color:#899898;
  height:125px;
  width:250px;
  color:#000;
  font-family:Arial;
  font-size:25px;
  }

アンカー ( <a>) はインライン要素です。(デフォルトでインライン化されている要素の完全なリストは次のとおりです)。インライン要素にwidthand を含めることはできませんheight。したがって、inline要素がそのネイティブ プロパティを維持する場合、つまり、通常の行の流れの中にあり、それでもwidth、height、およびvertical-alignプロパティinline-blockがある場合は、使用する必要があるプロパティです。

関連リンク

編集：説明を追加

于 2013-03-21T15:07:17.463 に答える
4

アンカーに または のいずれかのスタイルを持たdisplay:inline-blockせるdisplay:block

https://developer.mozilla.org/en-US/docs/CSS/display

于 2013-03-21T15:07:14.083 に答える
0

タグに寸法を持たせるには、display: block

したがって、css は次のようになります。

.tag a {
  display: block;
}

このような問題を解決する際に一貫性がないと個人的に思うので、私はインラインブロックを避ける傾向があります。

于 2013-03-21T15:08:00.093 に答える
0

のアンカーにスタイルを指定しdisplay:block、max-width:30px !important; 最大幅のサイズは任意です

li a { display: block; height: 30px; max-width: 30px !important; }

于 2016-04-07T08:55:52.447 に答える