ul 및 li 설정을 확인하는 데 도움을 주세요.
益伦
益伦 2017-12-10 21:28:44
0
1
1163

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서</title>
<style> ;
ul{
              /*기본 작은 점*/
list-style-type: disc;
/*빈 작은 점*/
list-style-type: Circle;
/*단색 작은 사각형*/
list -style -type: square;
/*숫자 일련번호는 순서화된 목록이 됩니다*/
list-style-type: 소수;
/*일련번호 앞에 0을 추가합니다: 예: 01, 02, 03*/
list- style -type:decimal-leading-zero;
/*원점을 대체하려면 이미지를 사용하세요. 크기가 매우 작아서 사용하기 어려워야 합니다. 대신 li 태그를 직접 제어하세요.*/
/*list-style-image: url(1.jpg); */
}
          /*맞춤형 목록 항목*/
li{
                                  /*점 취소*/
list-style-type: none;
/*이미지 위치 예약*/
패딩 - left: 2em;
/*이미지 업로드*/
list-style-image: url(1.jpg);
/*이미지 목록 항목은 반복되지 않습니다*/
background-repeat: no-repeat;
/*Image size*/
background- size: 1em 1em;
/*이미지 위치를 설정하고 텍스트 상단 그리드에 정렬한 다음 xy 축을 시각적으로 검사합니다*/
background-position: 0 4px;
}
</style> ;
</head>
<body>
<h3>프런트엔드 개발 도구</h3>
<ul>
<li>HTML</li>
<li>CSS</li> ;
<li>javaScript</li>
< ;li>jQuery</li>
<li>부트스트랩</li>
</ul>
</body>
</html>


표시된 결과 목록 항목에서 참조한 이미지가 여전히 동일합니다. 표시가 매우 크지만 1em 크기로 축소되지는 않습니다. 이유는 무엇입니까?

益伦
益伦

모든 응답(1)
chobits4

문제를 해결하려면 다음 두 가지 방법을 사용하는 것이 좋습니다. 1. 원본 이미지의 크기를 변경합니다. 2. li:before를 사용하여 설정

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}


최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!