LAYOUT LAB / CANONICAL HTML + CSS

badge-list

Align item labels with trailing counts.

720px

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

실행한 HTML·CSS 코드
<section class="badge_list" aria-label="Repository counts">
    <div class="badge_list_item"><span>Open issues</span><span>12</span></div>
    <div class="badge_list_item"><span>Pull requests</span><span>4</span></div>
    <div class="badge_list_item"><span>Reviews waiting</span><span>7</span></div>
</section>

<style>
.badge_list {
    display: grid;
    gap: 0.5rem;
}

.badge_list_item {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

</style>
원문 가이드