L布局 CSS - display: inline-block
- Trang trước L布局 CSS - Ví dụ dơi
- Trang tiếp theo Đối齐 CSS
display: inline-block
Với display: inline
So với, sự khác biệt chính là display: inline-block
Cho phép đặt chiều rộng và chiều cao trên phần tử.
相似, nếu thiết lập display: inline-block, sẽ giữ lại các biên mép ngoài/trong, trong khi đó display: inline sẽ không.
So với display: block, sự khác biệt chính là display: inline-block không thêm dòng mới sau phần tử, vì vậy phần tử đó có thể nằm bên cạnh các phần tử khác.
Dưới đây là ví dụ minh họa về cách display: inline, display: inline-block và display: block có hành vi khác nhau:
Mẫu
span.a { display: inline; /* span 的默认值 */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
Sử dụng inline-block để tạo liên kết định hướng
Một cách sử dụng phổ biến của display:inline-block
Sử dụng để hiển thị các mục danh sách theo hướng ngang thay vì dọc. Ví dụ sau tạo ra một liên kết định hướng ngang:
Mẫu
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }
- Trang trước L布局 CSS - Ví dụ dơi
- Trang tiếp theo Đối齐 CSS