English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체 목록

CSS 목록-style-position 속성 사용 방법 및 예제

list-style-position CSS 속성은 목록 항목 표시기가 목록 항목의 주체 블록 상자에 대한 위치를 지정합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 나타냅니다.

기본 값:outside
적용:목록 항목
thừa kế:
애니메이션 가능:아니요.보기: 애니메이션 속성
버전:CSS 1,2,3
JavaScript 문법:object.style.listStylePosition="inside"

목록 스타일 위치 사용 문법

이 속성의 문법은 다음과 같습니다:

list-style-position: inside | outside | initial | inherit

아래 예제는 list를 사용하는 방법을 보여줍니다.-style-position 속성.

  ol {
   list-style-position: inside;
  }
  ul {
   list-style-position: outside;
  }
시험해 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다.

설명
inside목록 표시기는 주체 블록 상자 내의 첫 번째 인라인 상자에 배치되며, 요소 내용 앞에 위치합니다.
outside목록 표시기는 주체 블록 상자 외부에 배치됩니다. 이는 기본 값입니다.
initial이 속성을 기본 값으로 설정합니다.
inherit지정된 경우, 부모 요소의 list와 연결된 요소는 부모 요소의 list를 사용합니다.-style-position 속성 값.

브라우저 호환성

list-style-position 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

  • 파이어폭스 1+

  • Google 크롬1+

  • 인터넷 익스플로러 4+

  • Apple 사파리 1+

  • 오페라 4+

추가로 읽기

다음 튜토리얼을 참조하십시오:HTML 목록CSS 목록

관련 속성:list-stylelist-style-imagelist-style-type