Hướng dẫn list item spacing css - khoảng cách mục danh sách css

Question

Đã đăng vào thg 8 19, 2021 6:58 SA 1 phút đọc 1 phút đọc

Là một dev Frontend, chắc hẳn ai cũng từng phải làm việc với 1 list. Đó có thể là 1 list sản phẩm, list ảnh, list item...

Với 1 list item, để chia layout sao cho đều chúng ta có thể dùng nhiều cách, ví dụ dùng

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

2 hoặc

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

3 Điểm khác biệt lớn nhất giữa

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

4 và

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

5 là với

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

4 thì chúng ta có thể set khoảng cách giữa cách item rất dễ dàng so với

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

5

Lấy ví dụ với 1 layout như sau Chúng ta có một list item gồm 4 item 1 hàng

Chúng ta có một list item gồm 4 item 1 hàng

.grid
  .grid__layout
    .grid__item Item 1
    .grid__item Item 2
    .grid__item Item 3
    .grid__item Item 4
    .grid__item Item 5
    .grid__item Item 6

Với

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

4 thì chúng ta chỉ cần set

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

9 là các item sẽ tự động cách đều nhau Nhưng với

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

5 thì chùng ta cần dùng đến margin để chia khoảng cách, cộng thêm với việc responsive sẽ rất khó khắn trong tính toán Chúng ta có thể giải quyết vẫn đề này bằng cách dùng

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

1

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

Trong phần tử

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

2, rõ ràng khoảng cách dọc giữa các đường có thể được định dạng với thuộc tính chiều cao dòng.

Câu hỏi của tôi là, trong một yếu tố

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

2, làm cách nào để đặt khoảng cách dọc giữa các mục danh sách?

Hỏi ngày 8 tháng 10 năm 2013 lúc 17:29Oct 8, 2013 at 17:29

BRICE Coustillasbrice CoustillasBrice Coustillas

2.1832 Huy hiệu vàng13 Huy hiệu bạc16 Huy hiệu đồng2 gold badges13 silver badges16 bronze badges

1

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

Chỉnh sửa: Nếu bạn không sử dụng trường hợp đặc biệt cho phần tử Li cuối cùng, danh sách của bạn sẽ có khoảng cách nhỏ sau đó mà bạn có thể thấy ở đây: http://jsfiddle.net/wqyw7/

Bây giờ so sánh với giải pháp của tôi: http://jsfiddle.net/wqyw7/1/

Chắc chắn điều này không hoạt động trong các trình duyệt cũ hơn nhưng bạn có thể dễ dàng sử dụng các tiện ích mở rộng JS sẽ cho phép điều này cho các trình duyệt cũ hơn.

Đã trả lời ngày 8 tháng 10 năm 2013 lúc 17:32Oct 8, 2013 at 17:32

6

Câu hỏi cũ nhưng tôi nghĩ rằng nó thiếu một câu trả lời. Tôi sẽ sử dụng một bộ chọn anh chị em liền kề. Bằng cách này, chúng tôi chỉ viết dòng CSS "Một" và xem xét không gian ở cuối hoặc bắt đầu, mà hầu hết các câu trả lời thiếu.

li + li {
  margin-top: 10px;
}

Đã trả lời ngày 14 tháng 9 năm 2020 lúc 19:37Sep 14, 2020 at 19:37

CedervallcedervallCedervall

86710 Huy hiệu bạc16 Huy hiệu đồng10 silver badges16 bronze badges

3

Tôi sẽ có xu hướng điều này có đức tính hỗ trợ IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSfiddle

Đã trả lời ngày 8 tháng 10 năm 2013 lúc 17:52Oct 8, 2013 at 17:52

Paulie_DPaulie_DPaulie_D

105K12 Huy hiệu vàng126 Huy hiệu bạc150 Huy hiệu đồng12 gold badges126 silver badges150 bronze badges

Thêm

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

4 vào thẻ

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

5 của bạn. Điều đó sẽ tạo không gian giữa

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

5 và bạn có thể sử dụng

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

7 để đặt khoảng cách cho văn bản trong các thẻ

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

5.

Đã trả lời ngày 8 tháng 10 năm 2013 lúc 17:31Oct 8, 2013 at 17:31

Disinfordisinfordisinfor

10,4K2 Huy hiệu vàng31 Huy hiệu bạc41 Huy hiệu đồng2 gold badges31 silver badges41 bronze badges

0

Bạn cũng có thể sử dụng thuộc tính có chiều cao dòng trên UL

ul {
  line-height: 45px;
}

div {
  border: 2px solid black;
}

<div>
  <ul>
    <li>line one</li>
    <li>line two</li>
    <li>line three</li>
  </ul>
</div>

Đã trả lời ngày 14 tháng 1 năm 2021 lúc 3:44Jan 14, 2021 at 3:44

Tcanbolattcanbolattcanbolat

3563 Huy hiệu bạc8 Huy hiệu Đồng3 silver badges8 bronze badges

Để áp dụng cho toàn bộ danh sách, hãy sử dụng

ul.space_list li { margin-bottom: 1em; }

Sau đó, trong HTML:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

Đã trả lời ngày 24 tháng 4 năm 2020 lúc 22:40Apr 24, 2020 at 22:40

Nhiều lần khi sản xuất các vụ nổ email HTML, bạn không thể sử dụng các bảng kiểu hoặc khối kiểu /kiểu. Tất cả CSS cần phải được nội tuyến. Trong trường hợp bạn muốn điều chỉnh khoảng cách giữa các viên đạn tôi sử dụng Li Style = "Biên độ lợi nhuận: 8px;" Trong mỗi vật phẩm đạn. Tùy chỉnh giá trị pixel theo ý thích của bạn.

Đã trả lời ngày 15 tháng 1 năm 2019 lúc 20:56Jan 15, 2019 at 20:56

1

Sử dụng lưới CSS trên phần tử cha mẹ

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

9 như vậy:

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

0

Đã trả lời ngày 16 tháng 12 năm 2021 lúc 17:51Dec 16, 2021 at 17:51

1

Đặt phần đệm đệm cho mỗi danh sách bằng lớp giả là một phương pháp khả thi. Ngoài ra chiều cao dòng có thể được sử dụng. Hãy nhớ rằng các thuộc tính phông chữ như phông chữ-gia đình, trọng lượng phông chữ, v.v ... đóng vai trò cho độ cao không đều.

Đã trả lời ngày 14 tháng 6 năm 2019 lúc 14:58Jun 14, 2019 at 14:58

1

Tôi thấy rằng tôi dễ dàng hơn nhiều để tạo khoảng cách sau khi danh sách các mục bằng cách thêm phần dưới biên vào danh sách đã đặt hàng trong danh sách không có toàn bộ thay vì các mục danh sách riêng lẻ.

.grid {
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}

1

Đã trả lời ngày 18 tháng 1 lúc 16:51Jan 18 at 16:51

CarlcarlCarl

Phù hiệu bằng đồng 3144 bronze badges

li:not(:last-child) {
    margin-bottom: 5px;
}

0bet giữa

li:not(:last-child) {
    margin-bottom: 5px;
}

1 Các mục nhập dòng dường như hoạt động hoàn toàn tốt trong tất cả các trình duyệt web mà tôi đã thử, nhưng nó không vượt qua trình kiểm tra W3C CSS3 trực tuyến. Nó cho tôi chính xác khoảng cách dòng tôi theo sau. Theo như tôi quan tâm, vì nó chắc chắn hoạt động, tôi vẫn kiên trì sử dụng nó, bất cứ điều gì W3C nói, cho đến khi ai đó có thể đưa ra một sự thay thế hợp pháp tốt.

Đã trả lời ngày 28 tháng 12 năm 2014 lúc 12:57Dec 28, 2014 at 12:57

2

programming css List-style-type CSS Paragraph spacing CSS Display: list-item CSS Flex-gap