Detailed explanation of how to use list-style and inline in CSS

In the past, only list-style:none; was used. I thought it was the only way. This method is just to remove the mark before li. Let me introduce CSS: list-style and Detailed explanation of inline usage, friends who are interested should not miss it I usually only focus on writing programs, such as p or span or ul li, etc., and I often encounter an inexplicable problem. My solution may be top: -10px or float:left. Of course, the problem can be solved. Just like taking a ship to New York and taking a plane to New York, the result is the same. They both arrive in New York, but in different ways. In comparison, flying is faster and more convenient. Choose for yourself!

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

First let’s look at the usage of list-style:

I used to only use list-style:none; this way, I thought it was the only way. Well, this method is just to remove the tag before li!

In fact list-style can be divided into three attributes: list-style-type list-style -position list-style-image

Look at what w3c says:

Definition and usage

list -style shorthand attribute sets all list properties in one declaration.

Description

This attribute is a shorthand attribute that covers all other list style attributes. Since it applies to all elements with display list-item, it can only be used on li elements in normal HTML and XHTML, but in fact it can be applied to any element and is inherited by list-item elements.

You can set the following properties in order:

list-style-type

list-style-position

list-style-image

You can not set one of the values, such as "list-style:circle inside;" is also allowed. Properties that are not set use their default values.

disc outside noneyesCSS1object.style.listStyle="decimal inside"

Example

Set the image as the list item markup in the list:

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

Browser support

All browsers support the list-style attribute.

Note: The attribute value "inherit" is not supported by any version of Internet Explorer (including IE8).

CSS list-style-type attribute

Definition and usage

The list-style-type attribute sets the type of list item tag.
discyesCSS1object.style.listStyleType="square" instance

Set different list styles:

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

Browser support

All browsers support list -style-type attribute.

Note: Any version of Internet Explorer (including IE8) does not support the attribute values ​​"decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", " armenian", "georgian" or "inherit".
Possible values ​​CSS2 values: none No tag. disc default. Markers are filled circles. The circle mark is a hollow circle. The square mark is a solid square. decimal markers are numbers. decimal-leading-zero0 starting number mark. (01, 02, 03, etc.) lower-roman lowercase Roman numerals (i, ii, iii, iv, v, etc.) upper-roman uppercase Roman numerals (I, II, III, IV, V, etc.) lower-alphaThe marker is lower-alpha (a, b, c, d, e, etc.)upper-alphaThe marker is upper-alpha (A, B, C, D, E, etc.) ) lower-greek lowercase Greek letters (alpha, beta, gamma, etc.) lower-latin lowercase Latin letters (a, b, c, d, e, etc.) upper-latin uppercase Latin letters (A, B, C , D, E, etc. ) hebrew traditional Hebrew numbering armenian traditional Armenian numbering georgan traditional Georgian numbering (an, ban, gan, etc.) cjk-ideographic simple ideographic number hiragana mark is: a , i, u, e, o, ka, ki, etc. (Japanese katakana) katakana marks are: A, I, U, E, O, KA, KI, etc. (Japanese katakana) hiragana-iroha marks are: i, ro, ha, ni, ho, he, to, etc. (Japanese katakana) katakana-iroha marks are: I, RO, HA, NI, HO, HE, TO, etc. (Japanese katakana) CSS2.1 values: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

CSS list-style-position property

Definition and usage

list-style-position property sets where to place the list item markup .
Description

This attribute is used to declare the position of the list mark relative to the content of the list item. The outside flag is placed at a certain distance from the border of the list item, but this distance is undefined in CSS. Inside flags are treated as if they were inline elements inserted at the front of the list item's content.
outsideyesCSS1object.style.listStylePosition="inside" Example

Specifies the position of the list item mark in the list:

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

The above is the detailed content of Detailed explanation of how to use list-style and inline in CSS. For more information, please follow other related articles on the PHP Chinese website!