2011-01-16 53 views
34

I次のコードを持っている:HTML + CSS: '' 幅は動作しません

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:これを修正するにはどうすればよいですか?

ありがとうございます!

答えて

88

質問1:なぜ?

デフォルトではblock elementではないためです。

質問2:これを修正するにはどうすればよいですか?

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

+1

男すごいdisplay: inline-block;を使用したのと同じライン上にあるHTMLとCSSのコードで小文字を使用しますちょうど私に頭痛のトンを救った!アンカータグの幅を調整できないのはなぜですか? – imjp

+0

http://bit.ly/1QQi3Rd 偉大な答え。 – Luis

1

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

1

CSSはすべての点についてです。これに応じて、属性がそれらの場所を取る。問題を抱えるのはGoogle University'sです。これは基礎を理解する上で多くの助けとなります。

2

に表示ブロックを追加します。アンカータグのための

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

メイクブロックは

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

スタイルでdisplay:blockを追加注:だけで変更を追加したり... .menu a:linkクラス内のすべての要素をREPETいけません新しいスタイル。 注:は常に、

1

これは私のために働いたが、私は望んでいたので、私のすべてのリンクは、私が

0
.menu A 
    { 
     float: left; 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 
関連する問題