>  기사  >  웹 프론트엔드  >  CSS 목록 스타일 위치 속성을 사용하는 방법

CSS 목록 스타일 위치 속성을 사용하는 방법

silencement
silencement원래의
2019-05-27 16:17:094645검색

CSS 목록 스타일 위치 속성을 사용하는 방법

css list-style-position 속성 정의 및 사용법

In css, list-style- position 속성은 목록 항목 표시를 배치할 위치를 설정하는 데 사용됩니다. 목록 항목의 내용을 기준으로 목록 표시의 위치를 ​​선언하는 데 사용됩니다. 항목이지만 이 거리는 CSS에서 결정됩니다. 정의되지 않은 경우 내부 플래그는 목록 항목 콘텐츠 앞에 삽입된 인라인 요소인 것처럼 처리됩니다.

모든 브라우저는 list-style-position 속성을 지원하지만 모든 버전의 Internet Explorer(IE8 포함)는 속성 값 "inherit"를 지원하지 않습니다.

여러 목록 속성을 동시에 설정해야 하는 경우 list-style 속성을 사용하면 목록 스타일 유형(유형)을 설정할 수 있습니다. 목록 항목 마크), list-style-position(목록 항목 마크업을 배치할 위치), list-style-image(목록 항목 마크업을 대체할 이미지) 속성을 동시에 하나의 명령문에 추가합니다.

css 목록 스타일 위치 속성 구문 형식

css 구문: 목록 스타일 위치: 내부/외부/ 상속

JavaScript 구문: object.style.listStylePosition="inside"

속성 값 설명

inside: 목록 항목 표시는 텍스트 내부에 배치되고 주변 텍스트는 표시에 따라 정렬됩니다.

outside: 기본값, 표시를 텍스트 왼쪽에 유지하고 목록 항목 표시는 외부에 배치됩니다. 텍스트 및 주변 텍스트가 마크

inherit: 상위 요소에서 list-style-position 속성 값을 상속합니다

#🎜🎜 #예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css list-style-position属性笔记</title>
<style type="text/css">
.inside {list-style-position: inside}
.outside {list-style-position: outside}
</style>
</head>
<body>
<p> "inside":</p>
<ul class="inside">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<p> "outside":</p>
<ul class="outside">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>

#🎜 🎜#실행 결과

CSS 목록 스타일 위치 속성을 사용하는 방법

위 내용은 CSS 목록 스타일 위치 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.