Explication détaillée de la façon d'utiliser le style de liste et en ligne en CSS

Dans le passé, seul list-style:none; je pensais que c'était le seul moyen de supprimer simplement la marque avant li. Laissez-moi vous présenter CSS : list-style et explication détaillée de l'utilisation en ligne, mes amis. ceux qui sont intéressés ne devraient pas le manquer Je me concentre généralement uniquement sur l'écriture de programmes, tels que p ou span ou ul li, etc., et je rencontre souvent un problème inexplicable. Ma solution peut être top : -10px ou float:left. Bien sûr, le problème peut être résolu. Tout comme prendre un bateau pour New York et prendre un avion pour New York, le résultat est le même. Ils arrivent tous les deux à New York, mais de manière différente, voler est plus rapide et plus pratique. Choisissez vous-même ! >

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

Regardons d'abord l'utilisation de list-style :

J'avais l'habitude d'utiliser uniquement list-style:none; de cette façon, je pensais que c'était la seule. Cette méthode consiste simplement à supprimer la balise avant li !
En fait, list-style peut être divisé en trois attributs :
list-style-type list -style-position list-style-image

Regardez ce que dit le w3c :

Définition et utilisation
list-style shorthand property définit toutes les propriétés de liste dans une seule déclaration.

Description

Cet attribut est un attribut abrégé qui couvre tous les autres attributs de style de liste. Puisqu'il s'applique à tous les éléments avec display list-item, il ne peut être utilisé que sur les éléments li en HTML et XHTML normaux, mais en fait, il peut être appliqué à n'importe quel élément et est hérité par les éléments list-item.

peut définir les attributs suivants dans l'ordre :

list-style-type

list-style-position

list-style-image

Vous ne pouvez pas définir l'une des valeurs, telle que "list-style:circle inside;" est également autorisée. Les propriétés qui ne sont pas définies utilisent leurs valeurs par défaut.

disque à l'extérieur de noneyesCSS1object.style.listStyle="decimal inside"


Exemple
Définissez l'image comme balisage d'élément de liste dans la liste :

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

Prise en charge des navigateurs

Tous les navigateurs prennent en charge l'attribut de style de liste.

Remarque : La valeur de l'attribut « hériter » n'est prise en charge dans aucune version d'Internet Explorer (y compris IE8).


Attribut CSS list-style-type

Définition et utilisation
L'attribut list-style-type définit le type de balisage des éléments de liste.
discyesCSS1object.style.listStyleType="square" instance

Définissez différents styles de liste :

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;}

Prise en charge des navigateurs

Tous les navigateurs prennent en charge le style de liste attribut -type.

Remarque : Aucune version d'Internet Explorer (y compris IE8) ne prend en charge les valeurs d'attribut "decimal-leading-zero", "inférieur-grec", "inférieur-latin", "upper- latin", " arménien", " géorgien " ou " hériter ".
Valeurs possibles Valeurs CSS2 : aucune Pas de balisage. disque par défaut. Les marqueurs sont des cercles remplis. La marque circulaire est un cercle creux. La marque carrée est un carré plein. les marqueurs décimaux sont des nombres. marque de numéro de départ décimal-principal-zéro0. (01, 02, 03, etc.) Chiffres romains minuscules (i, ii, iii, iv, v, etc.) Chiffres romains majuscules (I, II, III, IV, V, etc.) alphabétique inférieurLe marqueur est alphabétique inférieur (a, b, c, d, e, etc.)alpha supérieurLe marqueur est alphabétique supérieur (A, B, C, D, E, etc.) ) grec minuscule minuscule grec lettres (alpha, bêta, gamma, etc.) lettres latines minuscules minuscules (a, b, c, d, e, etc.) lettres latines majuscules latines supérieures (A, B, C, D, E, etc. ) numérotation hébraïque traditionnelle arménienne numérotation arménienne traditionnelle georgan numérotation géorgienne traditionnelle (an, ban, gan, etc.) cjk-idéographique numéro idéographique simple la marque hiragana est : a , i, u, e, o, ka, ki, etc. (Katakana japonais) les marques de katakana sont : A, I, U, E, O, KA, KI, etc. (Katakana japonais) Les marques hiragana-iroha sont : i, ro, ha, ni, ho, he, to, etc. (Katakana japonais) Les marques katakana-iroha sont : I, RO, HA, NI, HO, HE, TO, etc. (katakana japonais) Valeurs CSS2.1 : disque | carré | décimal-zéro | latin supérieur | latin supérieur |


Propriété CSS list-style-position
Définition et utilisation

La propriété list-style-position définit où placer le balisage de l'élément de liste.
Description

Cet attribut est utilisé pour déclarer la position de la marque de liste par rapport au contenu de l'élément de liste. Le drapeau extérieur est placé à une certaine distance de la bordure de l'élément de liste, mais cette distance n'est pas définie en CSS. Les indicateurs internes sont traités comme s'il s'agissait d'éléments en ligne insérés au début du contenu de l'élément de liste.
outsideyesCSS1object.style.listStylePosition="inside" instance

Spécifie la position de la marque de l'élément de liste dans la liste :

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 属性的值。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!