cssでa：linkの高さ/幅を設定する方法は？

84

aナビゲーションの要素の高さと幅を設定できません。

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

私が間違っていることについて何か考えはありますか？

html css

— 賛成
ソース

194

表示を追加：ブロック;

a-tagはインライン要素であるため、高さと幅は無視されます。

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

— Stijn Janssen
ソース

24

ブロックには、要素の後に新しい行が作成されるという副作用があります。

— cobra_Fast

27

高さを取得するには、アンカーをデフォルトとは異なる表示タイプにする必要があります。 display:inline-block;またはdisplay:block;。

また、line-heightこれでどちらが面白いかもしれないかを確認してください。

— Cobra_Fast
ソース

4

ラインハイトも優れたソリューションです。しかし、リンク内のテキストが2行を超える場合、それらの2行の間の空白は非常に大きくなります。

— Stijn Janssen

8

あなたの問題はおそらく a要素がdisplay: inline本質的にあるということです。インライン要素の幅と高さを設定することはできません。

あなたはセットしなければならないdisplay: blockのaが、リンクがブロック要素のように動作を開始するので、それは他の問題をもたらすでしょう。それに対する最も一般的な治療法は、float: leftとにかく並んでいるようにそれらを与えることです。

— ペッカ
ソース

1

それらをフローティングすると、おそらく親要素がそれらの周りに拡大するのを防ぐでしょう。

— cobra_Fast

@Cobraうん、でもそれは簡単に修正できる。2011年に、clearfixの必要性はありますか？

— ペッカ

1

では、ここで修正を修正する必要がありますか？それはあまりよく聞こえません。

— cobra_Fast

5

高さの定義から：

適用対象：置換されていないインライン要素、テーブル列、および列グループを除くすべての要素

a要素は、デフォルトでは、インライン要素である（それは非置換）。

表示を変更する必要があります（displayプロパティを使用して直接、またはfloatを使用して間接的に）。

— クエンティン
ソース

4

この観察をしてくれたRandomUs1rに感謝します。

display：inline-block;に変更します。その問題を解決します。– RandomUs1r 2013年5月14日21:59

次のように、トップナビゲーションメニューバーを自分で試しました。

まず、「li」要素を次のようにスタイル設定します。

表示：インラインブロック;
幅：7em;
text-align：center;

次に、「a」要素のスタイルを次のように設定します。

幅：100％;

これで、ナビゲーションリンクはすべて同じ幅になり、テキストは各リンクの中央に配置されます。

— user123318
ソース