> 웹 프론트엔드 > CSS 튜토리얼 > UL 센터링 문제 해결 시 떠오르는 몇 가지 포인트_경험 교류

UL 센터링 문제 해결 시 떠오르는 몇 가지 포인트_경험 교류

WBOY
풀어 주다: 2016-05-16 12:07:34
원래의
2140명이 탐색했습니다.

최근에 웹 사이트를 구축할 때 문제가 발생했습니다. ul 태그와 li 태그를 사용하여 구축한 탐색 모음이 li의 수와 li, ul의 너비를 알지 못한 채 중앙에 정렬되기를 원했지만 text-align:center를 사용한 후에는 문제가 발생했습니다. ul 하지만 원하는 효과는 없었습니다.

원래 페이지 구조는

코드 복사 코드는 다음과 같습니다
스타일 시트 구조는 다음과 같습니다.


코드 복사 코드는


이건 문제가 없지만 기능을 구현하려면 ID(menu ) 및 두 개의 CLASS(menu_ul, menu_li)가 정의되어 있으므로 CSS 파일이 Bloated.

ul 센터링 문제를 파악하지 못하는 이유는 CSS가 너무 지저분해서 체인이 끝날 무렵 구조를 정의하는 코드가 여러 가지로 섞여 있기 때문입니다. 내가 작성한 코드가 엉망이 되었습니다.

머리가 어지러울 때 더 이상 수정하고 싶지 않아서 위 기능을 구현하기 위해 코드를 다시 작성했습니다. 페이지 구조는