2009-06-24 10 views
0

これはOKです:なぜすべてがdisplay:blockになったのですか?

<html> 
<head> 
<title>tabs</title> 
<style> 
li { 
    display:inline; 
    margin:0 90px; 
    background:#777777 none repeat scroll 0 0; 
} 

li a { 
    padding:6px 12px; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
} 
</style> 

</head> 
<body> 
<div id="tabs"> 
    <div class="nav"> 
     <ul> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
     </ul> 
    </div> 
</div> 
</body> 
</html> 

しかし、私はそれdisplay:block作るためにli aを変更した場合、すべてがなくなっています。どうして?

<html> 
<head> 
<title>tabs</title> 
<style> 
li { 
    display:inline; 
    margin:0 90px; 
    background:#777777 none repeat scroll 0 0; 
} 

li a { 
    padding:6px 12px; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
    display:block; 
} 
</style> 

</head> 
<body> 
<div id="tabs"> 
    <div class="nav"> 
     <ul> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
      <li><a href="test">test</a></li> 
     </ul> 
    </div> 
</div> 
</body> 
</html> 

EDIT:それはパディングようだ:ここ計6Pxの12ピクセルは、Liにそれを動かすall.Butで働いていないが、どのようもない(IEで)パディングを作るのだろうか?

答えて

0

<li>をインラインで表示するのではなく、左に振ってみてください。

+0

返信いただきありがとうございます。 しかし、第2版ではどこがすべて消えていますか? – omg

+0

私は確信していませんが、組み合わせがうまくいかないように、インライン要素マージンを与えることには意味がありません。 – jeroen

+0

ああ、それは本当に行っていない、それは李の下に表示されますが、白では表示されません。インライン要素は、ブロック要素とは異なる動作をします。 – jeroen

0

li a定義で色を変更してください。例えば:

li a { 
    padding:6px 12px; 
    color:red; 
    text-decoration:none; 
    font-weight:bold; 
    display:block; 
} 
あなたはインライン要素(無改行なしの高さや幅)の内側(改行と高さと幅を持つ)ブロック要素を持っているので、あなたのコードは消え
+0

ああ、インラインでブロック競合しているように見えます。 – omg

0
li { 

    margin:0 90px; 
    background:#777777 none repeat scroll 0 0; 
} 


li a { 
display:block;  
padding:6px 12px; 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
} 
+0

パディング:6px 12pxはここでは全く機能していないようですね。 それを李に移すと、詰め物が平らにならないでしょう。 – omg

2

visual formatting modelのw3ページをご覧ください。

ブロックレベルの要素はブロックとして視覚的に書式設定されます。ブロックレベルの要素は前後に改行があります。

インライン要素は新しいコンテンツブロックを形成しません。それらは、親ブロックレベル要素のフロー内にあります。

ブロック要素がインライン要素にある場合、匿名ボックスが作成されます(リンク先ページのセクション9.2.1.1を参照)、各ブラウザはその状況を別々に処理します。

関連する問題