【CSSを0から1まで学ぶ】配置問題2（floatとdisplayの使い方）_html/css

1.1float 実装ナビゲーションバー

1.2display: inline-block 実装ナビゲーションバー

ホームページ

ウェブフロントエンド

htmlチュートリアル

【CSSを0から1まで学ぶ】配置問題2（floatとdisplayの使い方）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

display 属性は、要素が生成するボックスのタイプを指定します。

この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメントタイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。

ブラウザのサポート:
すべての主要なブラウザは、display 属性をサポートします。

注: Internet Explorer のどのバージョン (IE8 を含む) も、「inherit」、「inline-table」、「run-in」、「table」、「table-caption」、「table-cell」、「table」をサポートしていません。「 -column」、「table-column-group」、「table-row」、「table-row-group」の属性値。

ブロックレベル要素に display: inline-block を設定すると、float と同じ効果を達成できるためです。つまり、ブロックレベル要素の末尾には改行文字がありません。では、float をいつ使用するのか、display: inline-block をいつ使用するのか?

ほとんどの場合、float はテキストの折り返しを処理するように見えます。そのため、float を使用してテキストの折り返しを実装し、非テキストの折り返しを処理する場合は、主に display: inline-block を使用します。

1.1float 実装ナビゲーションバー

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>floatNav</title>    <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; /*这里主要是让父级div跟据内容自动伸长*/ float:left; } ul li { list-style:none; float:left; border-right:1px solid #d2d5d2; line-height:40px; padding: 0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style></head><body>    <div id="body-div">        <ul>            <li><a href="">首页</a></li>            <li><a href="">内容1</a></li>            <li><a href="">内容2</a></li>            <li><a href="">内容3</a></li>            <li><a href="">内容4</a></li>            <li><a href="">内容5</a></li>            <li><a href="">内容6</a></li>            <li><a href="">内容6</a></li>        </ul>    </div></body></html>

ログイン後にコピー

chrome、firefox、IE での表示効果は次のとおりです:

1.2display: inline-block 実装ナビゲーションバー

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>inlineNav</title>    <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*这里主要是让父级div跟据内容自动伸长*/ display:inline-block; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; margin:0 auto; } ul li { list-style:none; display:inline-block; border-right:1px solid #d2d5d2; line-height:40px; padding:0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style></head><body>    <div id="body-div">        <ul>            <li><a href="http://www.baidu.com" target="_blank">首页</a></li>            <li><a href="">内容1</a></li>            <li><a href="">内容2</a></li>            <li><a href="">内容3</a></li>            <li><a href="">内容4</a></li>            <li><a href="">内容5</a></li>            <li><a href="">内容6</a></li>            <li><a href="">内容7</a></li>        </ul>    </div></body></html>

ログイン後にコピー

このコードは chrome、firefox、IE で表示されます(>=8) の効果は次のとおりです:

IE (

IE (

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。