>웹 프론트엔드 >CSS 튜토리얼 >목록 스타일 이미지의 위치를 ​​조정할 수 있나요?

목록 스타일 이미지의 위치를 ​​조정할 수 있나요?

Linda Hamilton
Linda Hamilton원래의
2024-12-08 04:35:10419검색

Can I Adjust the Position of List-Style-Images?

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

질문:

목록 스타일 이미지의 위치를 ​​지정할 수 있습니까? 조정되었나요?

배경:

목록 항목에 패딩이 적용되면 목록 스타일 이미지는 패딩의 영향을 받지 않고 고정된 상태로 유지됩니다.

답변:

직접 배치 패딩 조정은 주로 목록 항목의 내용에 영향을 미치기 때문에 list-style-image는 가능하지 않습니다.

대체 솔루션:

배경 조합 패딩 스타일도 비슷한 것을 시뮬레이션할 수 있습니다. effect.

li {
  background: url(images/bullet.gif) no-repeat left top; /* Adjust 'left' and 'top' for further control */
  padding: 3px 0px 3px 10px;
  /* Reset default styles (optional): */
  list-style: none;
  margin: 0;
}

추가 옵션:

글머리 기호 이미지가 아닌 목록 항목 자체의 위치를 ​​지정하는 것이 목표인 경우 상위 목록 컨테이너(ul) 스타일을 지정하는 것이 좋습니다. . 이 접근 방식에 대한 자세한 내용은 Brad Frost의 "A List Apart" 기사를 참조하세요.

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

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