CSS에서 list-style-position:outside 사용 시 목록 아이콘이 표시되지 않는 문제 해결

오늘 웹사이트 스타일을 수정하다가 문제가 발생했습니다. CSS 속성을 어떻게 조정해도 기사 목록 아이콘이 나타나지 않았습니다. 마침내 list-style-position:outside를 목록 스타일로 변경했습니다. -위치:내부. 목록 아이콘이 표시됩니다. list-style-position:outside가 표시되지 않는 이유를 알아보기 위해 계속해서 여러 CSS 속성을 삭제하여 Outside가 표시되지 않는 이유를 알아보려고 노력했지만, 확실한 답은 찾지 못했습니다. , ul li 속성 width: 100% 및 padding: 0;은 목록 아이콘이 표시되지 않는 데 일정한 영향을 미칩니다. 이 문제가 발생하면 이 두 속성에 주의하세요.

css2.0 매뉴얼에서는 외부와 내부의 두 매개변수를 다음과 같이 설명합니다.

list-style-position : outside | inside

값:

outside: 기본값. 목록 항목 표시가 텍스트 외부에 배치되고 주변 텍스트가 표시에 따라 정렬되지 않습니다

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

위에서 정의에 따르면 패딩이 여전히 영향을 미치는 것을 알 수 있지만 여기에서 특정 문제는 발견되지 않았습니다. 너비: 100% 또는 패딩: 0을 제외한 다른 스타일을 삭제하여 표시 효과를 얻으세요.

문제는 이렇게 끝납니다. 스타일 요구 사항으로 인해 목록 줄을 초과할 때 자동으로 줄바꿈하지 않는다는 요구 사항을 충족하기 위해 list-style-type에 대해 10진수 아라비아 숫자 값을 사용했습니다. 다음 세 가지 매개변수가 사용되었습니다:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

그런데 목록이 더 이상 아라비아 숫자로 표시되지 않고 모두 숫자 1로 변경된 것을 발견했습니다. Overflow:hidden 삭제시 문제는 해결됐으나 줄임표가 나오지 않아 또 하나의 Hack을 배웠는데 앞으로 주의해야 할 부분입니다.

위 내용은 CSS에서 list-style-position:outside 사용 시 목록 아이콘이 표시되지 않는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!