너비를 알 수 없는 순서가 지정되지 않은 목록을 가로 가운데에 맞추는 방법은 무엇입니까?

폭을 알 수 없는 정렬되지 않은 목록을 가로 가운데에 배치

웹사이트 바닥글에서는 링크 목록을 가로 가운데에 배치하는 것이 일반적입니다. 고정 너비 목록을 중앙에 맞추는 것은 간단하지만 너비를 알 수 없는 목록을 중앙에 맞추는 것은 어려운 일입니다. 이 기사에서는 이 시나리오에 대한 해결책을 살펴봅니다.

문제

다음 HTML 코드를 고려하십시오.

<code class="HTML"><div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></code>

우리는 #footer div 내의 전체 콘텐츠를 가로 중심. 텍스트 정렬 설정: 단락 태그를 가운데로 설정하면 작동하지만 목록 항목이 서로 아래에 있지 않고 나란히 있어야 하므로 여기서는 적용할 수 없습니다.

해결책

해결책 인라인 항목이 있는 목록:

목록 항목을 인라인으로 표시할 수 있는 경우 다음 CSS로 충분합니다.

<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>

이 솔루션은 부동 소수점 및 왼쪽 및 오른쪽 속성을 활용하여 목록의 위치를 ​​조정합니다. 그에 따라 해당 항목도 알 수 없는 목록 너비에 관계없이 가로 가운데 정렬됩니다.

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