>  기사  >  웹 프론트엔드  >  너비를 알 수 없는 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

너비를 알 수 없는 정렬되지 않은 목록을 가운데에 배치하는 방법은 무엇입니까?

DDD
DDD원래의
2024-11-04 02:37:29610검색

How to Center an Unordered List of Unknown Width?

폭을 알 수 없는 정렬되지 않은 목록을 중앙에 배치

웹 디자인에서는 바닥글에 있는 것과 같은 링크 목록을 수평으로 중앙에 배치하는 것이 바람직한 경우가 많습니다. 텍스트를 정렬하는 것은 간단하지만 너비를 지정하지 않고 순서가 지정되지 않은 목록을 중앙에 배치하는 것은 까다로울 수 있습니다.

질문:

폭을 알 수 없는 정렬되지 않은 목록을 수평으로 중앙에 배치하는 방법은 무엇입니까? 목록 항목이 나란히 표시되어야 하는 곳은 어디입니까?

답변:

옵션 1: 인라인 표시

목록 항목을 표시: 인라인으로 설정할 수 있는 경우 해결 방법은 간단합니다.

<code class="css">#footer {
  text-align: center;
}

#footer ul {
  list-style: none;
}

#footer ul li {
  display: inline;
}</code>

옵션 2: 위치 지정을 통한 표시 차단

If 표시: 목록 항목에는 블록을 사용해야 합니다. 다음 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>

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.