가변 너비를 사용하여 정렬되지 않은 목록을 가로로 가운데에 맞추는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

가변 너비를 사용하여 정렬되지 않은 목록을 가로로 가운데에 맞추는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-10-29 06:56:30

원래의

662명이 탐색했습니다.

How to Center an Unordered List Horizontally with Variable Width?

폭을 알 수 없는 순서가 지정되지 않은 목록의 수평 정렬

웹사이트 바닥글에서는 탐색 링크 목록이 다음과 같이 표시되는 것이 일반적입니다. 정렬되지 않은 목록. 목록 너비에 관계없이 수평 중심을 보장하기 위해 UL 요소에 고정 너비를 설정하는 기존 방법은 실용적이지 않은 경우가 많습니다.

인라인 목록 항목에 대한 솔루션

목록 항목을 인라인으로 표시할 수 있으며 해결 방법은 간단합니다.

<code class="css">#footer {
  text-align: center;
}
#footer ul {
  list-style: none;
}
#footer ul li {
  display: inline;
}</code>

로그인 후 복사

그러나 목록 항목을 블록으로 표시해야 하는 경우 다음 CSS가 효과적입니다.

<code class="css">#footer {
  width: 100%;
  overflow: hidden;
}
#footer ul {
  list-style: none;
  position: relative;
  float: left;
  display: block;
  left: 50%;
}
#footer ul li {
  position: relative;
  float: left;
  display: block;
  right: 50%;
}</code>

로그인 후 복사

이 CSS 위치 UL 요소를 페이지 중앙에 배치하고 LI 요소를 그 주위에 떠 있도록 설정하여 원하는 수평 정렬을 달성합니다.

위 내용은 가변 너비를 사용하여 정렬되지 않은 목록을 가로로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!