LAYOUT LAB / CANONICAL HTML + CSS

step-nav

Present sequential steps with consistent vertical rhythm.

영역 너비 720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드

<nav class="step_nav" aria-label="Checkout steps">
    <a href="#">Shipping address</a>
    <a href="#">Payment method</a>
    <a href="#">Order review</a>
</nav>

<style>
.step_nav {
    display: grid;
    gap: 0.75rem;
    margin-block: 1rem;
}

</style>

원문 가이드