web-dev-qa-db-ja.com

HTML + CSS：「a」幅は機能しません

私は次のコードを持っています：

CSSパーツ：

<style type="text/css">
    .menu
    {
        width:200px;
    }

    .menu ul
    {
        list-style-image:none;
        list-style-type:none;
    }

    .menu li
    {
        margin:2px;
    }

    .menu A
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }

    .menu A:link
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
</style>

HTMLパーツ：

すべて正常に動作しますが、HTMLドキュメントの先頭に「DOCTYPE」要素を追加すると：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

「a」要素の幅は考慮されません。

質問1：なぜですか？

質問2：修正方法

どうもありがとう！

htmlcssdoctype
39
Budda

質問1：なぜですか？

デフォルトでは ブロック要素 ではないためです。

質問2：それを修正する方法は？

display: block;を使用してブロック要素にするか、display: inline-block;を使用してインラインブロックにします。

107
BalusC

アンカータグのブロックを作成し、スタイルにdisplay:blockを追加します

.menu a
{
    display:block;
    height:25px;
    width:170px;
    background:url(./images/button-51.png);
    padding:2px 5px ;
}

注：.menu a:linkクラスのすべての要素を繰り返してはいけません。変更または新しいスタイルを追加するだけです。 注： htmlおよびcssコードでは常に小文字を使用

6
Abudayah

これでうまくいきましたが、すべてのリンクを同じ行に配置したかったので、display: inline-block;

3
schwechel

に表示ブロックを追加します。

.menu A
    {
        display: block;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
3
shankhan

リンクはデフォルトではインライン要素です。追加 display: block;そして、設定された幅を使用します。

2
Alec

CSSはすべてがポイントです。これに応じて属性が代わりになります。 Google University's をご覧ください。これは、基本を少し理解するのに大いに役立ちます。

2
CharlesJHardy
.menu A
    {
        float: left;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
0
Bakul Sinha