首頁  >  文章  >  web前端  >  CSS中關於list-style與inline的使用方法詳解

CSS中關於list-style與inline的使用方法詳解

黄舟
黄舟原創
2017-06-29 09:49:402141瀏覽

以前只用到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; 這種方式,原以為也只這種方式呢,這個方式只不過是讓li 前的標記去掉而已!

事實上list-style 可分為三個屬性: list-style-type list-style -position list-style-image

看下w3c 的說法:

定義與用法

list -style 簡寫屬性在一個聲明中設定所有的清單屬性。

說明

該屬性是一個簡寫屬性,涵蓋了所有其他清單樣式屬性。由於它應用到所有 display 為 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用於 li 元素,不過實際上它可以應用到任何元素,並由 list-item 元素繼承。

可以依序設定下列屬性:

list-style-type

list-style-position

list-style-image

可以不設定其中的某個值,例如"list-style:circle inside;" 也是允許的。未設定的屬性會使用其預設值。

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

實例

將圖片設定為清單中的清單項目標記:

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

瀏覽器支援

所有瀏覽器都支援list-style 屬性。

註解:任何的版本的 Internet Explorer (包括 IE8)都不支援屬性值 "inherit"。

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)都不支援屬性值"decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、" armenian"、"georgian" 或"inherit"。
可能的值CSS2 的值: none無標記。 disc預設。標記是實心圓。 circle標記是空心圓。 square標記是實心方塊。 decimal標記是數字。 decimal-leading-zero0開頭的數位標記。 (01, 02, 03, 等。)lower-roman小寫羅馬數字(i, ii, iii, iv, v, 等。)upper-roman大寫羅馬數字(I, II, III, IV, V, 等) lower-alpha小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。 , D, E, 等。 , i, u, e, o, ka, ki, 等。 (日文片假名)katakana標記是:A, I, U, E, O, KA, KI, 等。 (日文片假名)hiragana-iroha標記是:i, ro, ha, ni, ho, he, to, 等。 (日文片假名)katakana-iroha標記是:I, RO, HA, NI, HO, HE, TO, 等。 (日文片假名)CSS2.1 的值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | noneper-latin | armenian | georgian | noneper-latin | | inherit


CSS list-style-position 屬性
#定義和用法

list-style-position 屬性設定在何處放置清單項目標記。
說明

此屬性用於宣告清單標誌相對於清單項目內容的位置。外部 (outside) 標誌會放在離清單項目邊框邊界一定距離處,不過這距離在 CSS 中未定義。內部 (inside) 標誌處理為好像它們是插入在清單項目內容最前面的行內元素一樣。
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中關於list-style與inline的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn