01/10/2018, 08:13

Hỏi về việc các phần của menu đa cấp có khoảng cách?

E dc giao bài tập làm 1 menu ngang, code như sau:

CodePen

OWWwQo

...

Kq là show được nhưng giữa các phần của menu lại có khoảng trắng !!
Ai biết fix thì chỉ cho e lý do và solution luôn nhé ^^
Em cảm ơn nhiều

Đỗ Trung Quân viết 10:19 ngày 01/10/2018

Cách 1:

ul {
  display: flex;
}

Cách 2:

.menu .list li {
  display: inline-block;
  margin: -4px;
}

*grab popcorn* viết 10:19 ngày 01/10/2018

Đây luôn:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Long Dragon viết 10:21 ngày 01/10/2018

Cho e hỏi sao phải để margin: -4px; thế a ?

Đây luôn:

Em không dịch được a ơi, dịch vào chỗ nhưng cũng k hiểu nữa

Đỗ Trung Quân viết 10:27 ngày 01/10/2018

Cho e hỏi sao phải để margin: -4px; thế a ?

Em hiểu margin là gì?

Long Dragon viết 10:17 ngày 01/10/2018

Em biết margin mà, ý e là sao lại để value là -4px ?

Đỗ Trung Quân viết 10:22 ngày 01/10/2018

Normal html, nếu không có css để reset lại các thuộc tính. Sẽ mặc định có khoảng cách 4px giữa các thẻ ul khi sử dụng inline-block. Để tránh việc này thì em trừ đi 4px margin so với mặc định là 0. Vì vậy sẽ là -4

Long Dragon viết 10:17 ngày 01/10/2018

À, em có đọc trên trang này thì hiểu rồi

kipalog.com

Khoảng trắng giữa các phần tử inline hoặc inline-block

Vấn đề với float Thông thường để chia giao diện thành từng cột mình thường dùng float nhưng nó có nhược điểm là các cột không thể luôn căn giữa the...

hình như cách của anh @qtd phải thêm margin-top: 0; để tránh menu bị hút lên phía trên nữa thì phải ?
Cảm ơn mọi người !

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Long Dragon

0 chủ đề

0 bài viết

Tác giả nổi bật