Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Hàng cuộn ngang

Gói một nhóm vốn làm màn hình dọc dài quá mức vào một hàng có thể quét ngang.

Bố cục

Xem trước trực tiếp

Nguồn

<section class="dc-hrow" aria-labelledby="dc-hrow-h">
  <div class="dc-hrow__head">
    <h2 class="dc-hrow__title" id="dc-hrow-h">오늘 새로 올라온 일자리</h2>
    <a class="dc-hrow__more" href="#">전체 보기</a>
  </div>
  <ul class="dc-hrow__track">
    <li class="dc-hrow__cell">
      <a class="dc-hrow__card" href="#">
        <span class="dc-hrow__thumb" aria-hidden="true"></span>
        <span class="dc-hrow__name">물류 상하차</span>
        <span class="dc-hrow__meta">인천 · 일당 140,000원</span>
      </a>
    </li>
    <li class="dc-hrow__cell">
      <a class="dc-hrow__card" href="#">
        <span class="dc-hrow__thumb" aria-hidden="true"></span>
        <span class="dc-hrow__name">용접 보조</span>
        <span class="dc-hrow__meta">김해 · 일당 160,000원</span>
      </a>
    </li>
    <li class="dc-hrow__cell">
      <a class="dc-hrow__card" href="#">
        <span class="dc-hrow__thumb" aria-hidden="true"></span>
        <span class="dc-hrow__name">식품 포장</span>
        <span class="dc-hrow__meta">평택 · 일당 130,000원</span>
      </a>
    </li>
    <li class="dc-hrow__cell">
      <a class="dc-hrow__card" href="#">
        <span class="dc-hrow__thumb" aria-hidden="true"></span>
        <span class="dc-hrow__name">객실 정리</span>
        <span class="dc-hrow__meta">제주 · 월급 2,450,000원</span>
      </a>
    </li>
    <li class="dc-hrow__cell">
      <a class="dc-hrow__card" href="#">
        <span class="dc-hrow__thumb" aria-hidden="true"></span>
        <span class="dc-hrow__name">수확 일손</span>
        <span class="dc-hrow__meta">나주 · 일당 120,000원</span>
      </a>
    </li>
  </ul>
</section>
.dc-hrow { font-family: var(--dc-font); }
.dc-hrow__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dc-3);
  padding: 0 var(--dc-4) var(--dc-2);
}
.dc-hrow__title {
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  color: var(--dc-text);
}
.dc-hrow__more {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-left: var(--dc-2);
  font-size: 13px; font-weight: 700;
  color: var(--dc-brand-text); text-decoration: none;
}
.dc-hrow__track {
  display: flex; gap: var(--dc-3);
  margin: 0; padding: var(--dc-1) var(--dc-4) var(--dc-4);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--dc-4);
  -webkit-overflow-scrolling: touch;
}
.dc-hrow__cell { flex: 0 0 auto; scroll-snap-align: start; }
.dc-hrow__card {
  display: flex; flex-direction: column; gap: var(--dc-1);
  width: 152px;
  color: var(--dc-text); text-decoration: none;
}
.dc-hrow__thumb {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  margin-bottom: var(--dc-1);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-sunken);
}
.dc-hrow__name {
  font-size: 14px; font-weight: 700; line-height: 1.35;
}
.dc-hrow__meta { font-size: 12px; color: var(--dc-text-sub); }
.dc-hrow__card--peek { width: 272px; }
.dc-hrow__card--peek .dc-hrow__thumb { aspect-ratio: 16 / 9; }
.dc-hrow__card--peek .dc-hrow__name { font-size: 16px; }
.dc-hrow__track--chips { padding-top: var(--dc-2); padding-bottom: var(--dc-2); }
.dc-hrow__chip {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-full);
  background: var(--dc-surface); color: var(--dc-text-sub);
  font-family: inherit; font-size: 14px; font-weight: 700;
  white-space: nowrap;
}
.dc-hrow__chip[aria-pressed="true"] {
  border-color: var(--dc-brand);
  background: var(--dc-brand-soft);
  color: var(--dc-brand-text);
}

Cách dùng

  • Để ô kế tiếp hé ra ở rìa phải — vệt hé đó là dấu hiệu duy nhất cho biết còn nữa
  • Mỗi hàng giữ dưới khoảng mười ô; nhiều hơn thì dẫn sang màn hình xem tất cả
  • Cho ô một chiều rộng cố định thay vì bằng chiều rộng màn hình, và dùng snap proximity thay vì mandatory

Điểm cần lưu ý

  • Đặt khoảng trống hai đầu vào padding của hàng, không phải margin của ô, để ô cuối không dán vào rìa màn hình
  • Hàng chỉ trượt ngang vẫn phải tới được bằng bàn phím — mỗi ô nên là liên kết hoặc nút
  • Đừng để hàng cuộn được cả theo chiều dọc; ngón tay sẽ mất phương

Tiếp theo