float:center_Experience 교환의 CSS 크로스 브라우저 구현

코드 복사 코드는 다음과 같습니다.

>

목록 1

목록 2

목록 3 li>

li가 플로팅되고 중앙에 위치하기를 바랍니다. (li의 개수는 고정되어 있지 않으며 ul의 너비는 알 수 없습니다.) ). ul의 text-align:center를 설정한 다음 li의 디스플레이를 설정하여 중앙 정렬을 달성할 수 있지만 이는 원래 의도가 float:center를 구현하는 것이 아닙니다.

여기서는 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기반으로 일반 문서 흐름에서 위치를 상쇄하는 위치:상대적을 검토해야 합니다. 그런 다음 ul position:relative; left: 50%를 설정하고 li를 왼쪽으로 설정한 다음 position:relative; 50%(또는 left: -50%)로 설정한 다음 li를 가운데로 설정합니다. . 중앙 정렬과 동일합니다. 더 이상 고민하지 말고 먼저 시도해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

#macji{
위치:상대적 ;
너비:100%;
배경색:#eee;
overflow:hidden; macji .macji -skin{
float:왼쪽;
위치:상대적;
왼쪽:50%
}
#macji .macji-skin li{
위치:상대적;
오른쪽:50%;
float:왼쪽;
padding:0 10px;
line-height:60px; 🎜>}