CSSのリストスタイルとインラインの使い方を詳しく解説

以前は list-style:none; しか使っていなかったので、li の前のマークを削除するだけの方法だと思っていました。CSS: list-style と inline の使い方を詳しく紹介します。説明、興味のある友人は見逃さないでください 私は通常、p、span、ul liなどのプログラムを書くことに集中していますが、解決策はtop: -10pxまたはfloat:leftである可能性があります。もちろん、問題は解決できます。船でニューヨークに行くのと飛行機でニューヨークに行くのと同じように、どちらもニューヨークに到着します。比較すると、飛行機の方が早くて便利です。

display:inline; 
list-style:none outside none; 
white-space
:nowrap

list-style の使用方法は次のとおりです:

以前は list-style:none; の前のマークを削除するだけの方法だと思っていました。
事実 上記の list-style は 3 つの属性に分類できます:
list-style-type
list-style-position list-style-image
w3c の記述を見てください:

定義use
list -style 省略表現属性は、1 つの宣言ですべてのリスト プロパティを設定します。

説明

この属性は、他のすべてのリスト スタイル属性をカバーする短縮属性です。 list-item を表示するすべての要素に適用されるため、通常の HTML や XHTML では li 要素でしか使用できませんが、実際にはどの要素にも適用でき、list-item 要素にも継承されます。

次の属性を順番に設定できます:

list-style-type

list-style-position

list-style-image

「list-style:」などの値の 1 つを設定することはできません。内側に丸を付けることもできます。設定されていないプロパティには、デフォルト値が使用されます。

noneyesCSS1object.style.listStyle="10進数の内側"


例
画像をリスト内のリスト項目マークアップとして設定します:

ul { list-style:square inside url('/i/arrow.gif'); }

ブラウザサポート

すべてのブラウザは list-style 属性をサポートします。

注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。


CSS list-style-type 属性

定義と使用法
list-style-type 属性は、リスト項目のマークアップのタイプを設定します。
discyesCSS1object.style.listStyleType="square" インスタンス

さまざまなリスト スタイルを設定します:

ul.circle {list-style-type:circle;} 
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;} 
ol.lower-alpha {list-style-type:lower-alpha;}

ブラウザのサポート

すべてのブラウザは list-style-type 属性をサポートします。

注: Internet Explorer (IE8 を含む) のどのバージョンでも、属性値「10 進数先行ゼロ」、「小ギリシャ語」、「小ラテン語」、「大ラテン語」、「アルメニア語」はサポートされていません。 、「グルジア語」または「継承」。
可能な値 CSS2 値: none マークアップなし。ディスクのデフォルト。マーカーは塗りつぶされた円です。丸印は白丸です。四角マークは実線の四角形です。小数点マーカーは数値です。小数点先行ゼロ0 開始番号マーク。 (01、02、03 など) 小文字のローマ字 小文字のローマ数字 (i、ii、iii、iv、v など) 大文字のローマ字 大文字のローマ数字 (I、II、III、IV、V など)下位アルファ マーカーは下位アルファ (a、b、c、d、e など) です。上位アルファ マーカーは上位アルファ (A、B、C、D、E など) です。) 小文字 ギリシャ語 小文字 ギリシャ語文字（アルファ、ベータ、ガンマなど） ラテン語小文字 ラテン文字（a、b、c、d、eなど） ラテン語大文字 ラテン文字（A、B、C、D、Eなど） ) ヘブライ語の伝統的なヘブライ語の番号付け アルメニア語の伝統的なアルメニア語の番号付け ゲオルガン 伝統的なグルジア語の番号付け (アン、バン、ガンなど) cjk 表意文字 単純な表意文字の数字 ひらがなマークは、a、i、u、e、o、ka、ki などです。 (日本語のカタカナ) カタカナ記号は、A、I、U、E、O、KA、KI などです。 (日本語のカタカナ) ひらがないろはマークは、「い」「ろ」「は」「に」「ほ」「へ」「と」などです。 (日本語のカタカナ) カタカナいろはマーカーは、「い」「ろ」「は」「に」「ほ」「へ」「と」などです。 (日本語のカタカナ) 円 | 10 進数 | ローマ字 | ラテン語 |


CSS list-style-position プロパティ
定義と使用法

list-style-position プロパティは、リスト項目のマークアップを配置する場所を設定します。
説明

この属性は、リスト項目の内容に対するリスト マークの位置を宣言するために使用されます。外側のフラグはリスト項目の境界から一定の距離に配置されますが、この距離は CSS では定義されていません。内部フラグは、リスト項目のコンテンツの先頭に挿入されたインライン要素であるかのように扱われます。
outsideyesCSS1object.style.listStylePosition="inside" インスタンス

リスト内のリスト項目マークの位置を指定します:

ul { list-style-position:inside; }

浏览器支持

所有浏览器都支持 list-style-position 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值 inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定应该从父元素继承 list-style-position 属性的值。

CSS list-style-image 属性

定义和用法

list-style-image 属性使用图像来替换列表项的标记。
说明

这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。

注释：请始终规定一个 "list-style-type" 属性以防图像不可用。
noneyesCSS1object.style.listStyleImage="url('/images/blueball.gif')"实例

把图像设置为列表中的项目标记：

ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; }

浏览器支持

所有浏览器都支持 list-style-image 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值 URL图像的路径。none默认。无图形被显示。inherit规定应该从父元素继承 list-style-image 属性的值。

二. inline 的说明 :

display:block就是将元素显示为块级元素.

block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185和25edfb22a4f469ecb59f1190150159c6是块元素的例子。

display:inline就是将元素显示为行内元素.

inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b, 8e99a69fbe029cd4e2b854e244eab143和907fae80ddef53131f3292ee4f81644b是inline元素的例子。

inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

IE下块元素如何实现display:inline-block的效果？

有两种方法：

1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

p {display:inline-block;...} 
p {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

p {display:inline; zoom:1;}

CSS white-space 属性

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

normalyesCSS1object.style.whiteSpace="pre"实例

规定段落中的文本不进行换行：

p { white-space: nowrap }

浏览器支持

所有浏览器都支持 white-space 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值 normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 e03b848252eb9375d56be284e690e873 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 0c6dc11e160d3b678d68754cc175188a 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

以上がCSSのリストスタイルとインラインの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。