CSS에서 목록 스타일과 인라인을 사용하는 방법에 대한 자세한 설명

예전에는 list-style:none;만 사용했는데, 이 방법이 li 앞에 있는 표시를 제거하는 방법일 뿐입니다. CSS의 list-style과 inline 사용법을 소개해드리겠습니다. , 관심있는 친구들은 놓치지 마세요 저는 주로 p,span,ulli 등과 같은 프로그램 작성에만 집중하는데 설명할 수 없는 문제에 자주 직면합니다. 내 솔루션은 top: -10px 또는 float:left일 수 있습니다. 물론 문제는 해결될 수 있습니다. 뉴욕으로 배를 타고 가는 것과 마찬가지로, 결과는 같습니다. 둘 다 뉴욕에 도착하지만, 그에 비해 비행기를 타는 것이 더 빠르고 편리합니다.

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

먼저 목록 스타일을 사용하는 방법은 다음과 같습니다.

저는 이전에는 list-style:none만 사용했습니다. 이 방법이 li 앞에 있는 표시를 제거하는 유일한 방법이라고 생각했습니다.

사실 위의 목록 스타일은 세 가지 속성으로 나눌 수 있습니다: list-style-type list-style-position list-style-image

w3c가 말하는 내용을 보세요:

정의 사용법

list -style 단축 속성은 하나의 선언으로 모든 목록 속성을 설정합니다.

Description

이 속성은 다른 모든 목록 스타일 속성을 포괄하는 단축 속성입니다. 표시 목록 항목이 있는 모든 요소에 적용되므로 일반 HTML 및 XHTML에서는 li 요소에만 사용할 수 있지만 실제로는 모든 요소에 적용할 수 있으며 목록 항목 요소에 상속됩니다.

다음 속성을 순서대로 설정할 수 있습니다.

list-style-type

list-style-position

list-style-image

"list-style:"과 같은 값 중 하나를 설정할 수 없습니다. 내부에 동그라미도 허용됩니다. 설정되지 않은 속성은 기본값을 사용합니다.

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

Example

이미지를 목록의 목록 항목 마크업으로 설정:

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

브라우저 지원

모든 브라우저는 목록 스타일 속성을 지원합니다.

참고: 속성 값 "inherit"는 모든 Internet Explorer 버전(IE8 포함)에서 지원되지 않습니다.

CSS 목록 스타일 유형 속성

정의 및 사용법

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" 속성 값을 지원하지 않습니다. , "조지아 사람" 또는 "상속".
가능한 값 CSS2 값: 없음 마크업이 없습니다. 디스크 기본값. 마커는 채워진 원입니다. 원 마크는 속이 빈 원입니다. 사각형 표시는 단색 사각형입니다. 소수점은 숫자입니다. 소수점 앞자리 00 시작 숫자 표시. (01, 02, 03 등) 로마자 소문자 로마숫자(i, ii, iii, iv, v 등) 로마자 대문자 로마숫자(I, II, III, IV, V 등) lower-alpha마커는 하위 알파(a, b, c, d, e 등)입니다.upper-alpha마커는 상위 알파(A, B, C, D, E 등)입니다. ) Lower-Greek 소문자 그리스어 문자(알파, 베타, 감마 등) 라틴 문자 소문자 라틴 문자(a, b, c, d, e 등) 라틴어 대문자 라틴 문자(A, B, C , D, E 등) ) 히브리어 전통 히브리어 숫자 매기기 아르메니아 전통 아르메니아 숫자 매기기 georgan 전통 조지아 숫자 매기기 (an, ban, gan 등) cjk 표의 문자 단순 표의 문자 숫자 히라가나 표시는 a , i, u, e, o, ka, ki 등입니다. (일본어 가타카나) 가타카나 표시는 A, I, U, E, O, KA, KI 등입니다. (일본어 가타카나) 히라가나 이로하 표시는 i, ro, ha, ni, ho, he, to 등입니다. (일본어 가타카나) 가타카나 이로하 표시는 I, RO, HA, NI, HO, HE, TO 등입니다. (일본어 가타카나) CSS2.1 값: 디스크 | 원 | 십진수 | 로마어 | 로마어 | 라틴어 | 없음 |

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!