CSS에서 목록 스타일 이미지 위치 지정을 어떻게 사용자 정의할 수 있나요?

목록 스타일 이미지 위치 사용자 정의

목록 항목에 패딩을 적용할 때 목록 스타일 이미지는 고정된 상태로 유지됩니다. 이는 원하는 서식을 얻는 데 제한이 될 수 있습니다.

배경 스타일을 사용한 솔루션

목록 스타일 이미지의 위치를 ​​직접 조정하는 것은 불가능합니다. 그러나 배경과 패딩 스타일의 조합은 유사한 효과를 시뮬레이션할 수 있습니다.

li {
  background: url(images/bullet.gif) no-repeat left top;
  padding: 3px 0px 3px 10px;
  list-style: none;
  margin: 0;
}

이 예에서는

• 배경이 목록 스타일 이미지를 배치합니다.
• 여백은 이미지를 기준으로 콘텐츠의 위치를 ​​결정합니다.
• 목록 스타일과 여백 스타일을 재설정하면 일관성.

대체 접근 방식

전체 글머리 기호 목록을 컨테이너 내에 배치하는 것이 목표라면 상위 목록 컨테이너(ul)의 스타일을 지정하는 것이 좋습니다. A List Apart 기사와 같은 리소스에서 지침을 제공할 수 있습니다. [순서가 지정되지 않은 목록에 세련된 "박스" 컨테이너 추가](https://alistapart.com/article/box-model-list-styling)

위 내용은 CSS에서 목록 스타일 이미지 위치 지정을 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!