認識display:inline;float:left;

5368 ワード

一.
まず、display:inline;float:left;正しい意味.display:inline;(インライン)CSS権威ガイドのテキストには、ブロックレベルの要素ではない可視要素がインライン要素であることが示されています.その表現の特性は「行レイアウト」形式であり、ここで「行レイアウト」とは、その表現形式が常に行で表示されることを意味する.例えば、インライン要素border-bottom:1 px solid 0000を設定します.は、行ごとに繰り返され、行の下に黒い細い線があることを示します.ブロックレベル要素の場合、表示される黒い線はブロックの下にのみ表示されます.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>span</title>

</head>

<body>
	<span style="border-bottom:1px solid #000;">
    	span     :display:inline;<br />
               border-bottom:1px solid #000;<br/>	
                    
    </span>
</body>
</html>

効果は次のとおりです.
spanのデフォルトスタイルは、display:inline;ボーダースタイルをborder-bottom:1 px solid#000に設定します.行ごとに下線が表示されます

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>

</head>

<body>
	<span style="border-bottom:1px solid #000; display:block;">
    	span     :display:inline;,      :display:block<br />
                       border-bottom:1px solid #000;<br/>	
                            
    </span>
</body>
</html>

もちろんこれはdisplay:inlineのように見えません.float:left;の違いはありますが、float:leftを理解した場合.の特性では、何が起こっているのかがわかります.float:left;(左フローティング)指定した要素を通常のドキュメントフローから逸脱させて生成される特別なレイアウトプロパティです.また、FLOATはブロックレベル要素に適用されなければならない.すなわち、フローティングはインラインラベルに適用されるべきではない.あるいは言い換えると、FLOATが適用されると、この要素はブロックレベル要素として指定される.では、わかりました.インライン(display:inline;)要素は幅を設定できません.インラインは行レイアウトに属し、その特性は1行でレイアウトされるため、幅を設定できません.
スタイルdisplay:blockまたはfloat:leftを定義した場合は、幅の高さを設定できます.


二.
実用化:例

これではaをdisplay:blockに設定することはできません.設定するとブロック形式で表示されます
aのデフォルトはdisplay:inlineです.aに背景を付ける必要がない場合は、以下のようにリストの中央を実現できます.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>      </title>
<style type="text/css">
*{margin:0; padding:0;}
div{ text-align:center; background:#CCC; padding:9px 0; width:900px; margin:0 auto;}
li{ list-style:none; display:inline;}
a{ padding:0 10px; color:#900; text-decoration:none;}
a:hover{ color:#C30;}



</style>

</head>

<body>
<div>
	<ul>
    	<li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">   </a></li>
    </ul>
</div>
</body>
</html>

三.
Li floatの使用がより柔軟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>      </title>
<style type="text/css">
*{margin:0; padding:0;}

div{  background:#CCC; width:1000px; overflow:hidden; position:relative; margin:0 auto;}
ul{ position:relative; left:50%; float:left;}
li{ position: relative;list-style:none; float:left; right:50%;}
a{ padding:6px 10px; color:#900; text-decoration:none; display:block; }
a:hover{ color:#fff; background:#F93;}



</style>

</head>

<body>
<div>
	<ul>
    	<li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">    </a></li>
        <li><a href="javascript:;">   </a></li>                
    </ul>
</div> 
 </body>
</html>

ASP.NETにおけるImageButtonピクチャボタンコントロールの使用

モバイル側スクロールスルーの問題解決策