Bạn đang cố gắng tạo một lưới nội tuyến với các quy tắc CSS của riêng mình bằng cách sử dụng chế độ hiển thị khối nội tuyến phải không? . ?". Mặc dù CSS của bạn có thể rất đơn giản, nhưng bạn sẽ luôn có khoảng cách giữa các phần tử HTML của mình với phần hiển thị. kiểu khối nội tuyến. Hãy xem xét đoạn mã sau
<div class="header"> <div class="head-item">1</div> <div class="head-item">2</div> <div class="head-item">3</div> <div class="head-item">4</div> <div class="head-item">5</div> </div> <style> .head-item { width: 50px; height: 50px; text-align: center; display: inline-block; border: 1px solid gray; } </style>Đã tưởng tượng nó sẽ trông như thế nào?
Tuy nhiên, thay vào đó, bạn sẽ nhận được kết quả sau
Trong trường hợp bạn cũng không để ý, sẽ có một khoảng trắng (ở hàng thứ hai được đánh dấu màu xanh lam bằng trình chỉnh sửa hình ảnh) giữa mỗi div với lớp head-item. Theo phong cách của chúng tôi, chúng tôi có các khối đơn giản 50x50 có văn bản được căn giữa và đường viền của nó có màu xám. Sau đó, vấn đề là gì? . Bản thân đây không phải là lỗi mà là hành vi dự kiến của một phần tử sử dụng display: inline-block.
Để giải quyết vấn đề này một cách dễ dàng nếu mục tiêu là tạo một nhóm div nội tuyến sẽ là đặt thuộc tính float của lớp sang trái
.head-item { float: left; width: 50px; height: 50px; text-align: center; border: 1px solid gray; }Điều này sẽ ngay lập tức tạo ra lưới mong muốn của chúng tôi. Tuy nhiên, điều này có thể không hữu ích trong trường hợp của bạn và có thể không hoạt động với các kiểu khác. Trong bài viết này, chúng tôi sẽ chia sẻ với bạn các giải pháp khả thi mà bạn có thể áp dụng trong dự án của mình để giải quyết vấn đề này
1. Xóa khoảng trắng giữa các thẻ HTML
Giải pháp đầu tiên và được biết đến nhiều nhất để giải quyết vấn đề này là cắt bỏ mọi khoảng cách giữa các phần tử HTML có màn hình. thuộc tính khối nội tuyến, ví dụ: nếu chúng tôi xóa khoảng trắng của đánh dấu ban đầu, thì bây giờ chúng tôi sẽ có
<div class="header"><div class="head-item">1</div><div class="head-item">2</div><div class="head-item">3</div><div class="head-item">4</div><div class="head-item">5</div></div>Phần đánh dấu trước đó (tương tự nhưng không có khoảng cách giữa các thẻ html) sẽ hiển thị thành công kết quả div mong muốn của chúng ta trên một hàng không có khoảng trắng
Như bạn có thể thấy, chúng tôi không cần thêm các kiểu bổ sung mà chỉ cần xóa khoảng trắng giữa các phần tử. Nếu bạn muốn sử dụng giải pháp này, có lẽ nếu bạn không muốn gặp vấn đề với các lập trình viên khác về mức độ lộn xộn của mã, thì bạn có thể muốn thực hiện việc này bằng cách sử dụng ngôn ngữ máy chủ của mình. g với PHP
<?php $html = $text = <<<EOT <div class="header"> <div class="head-item">1</div> <div class="head-item">2</div> <div class="head-item">3</div> <div class="head-item">4</div> <div class="head-item">5</div> </div> EOT; $html = preg_replace('/(\>)\s*(\<)/m', '$1$2', $html); echo $html;2. Xóa khoảng trắng giữa các thẻ HTML bằng nhận xét
Giải pháp này về mặt lý thuyết giống như giải pháp đầu tiên, tuy nhiên, bạn sẽ không cần phải đánh dấu vào một dòng duy nhất, thay vào đó, hãy mở nhận xét từ điểm mà phần tử của bạn kết thúc và đóng nhận xét nơi phần tử tiếp theo bắt đầu
<div class="header"> <div class="head-item">1</div><!-- --><div class="head-item">2</div><!-- --><div class="head-item">3</div><!-- --><div class="head-item">4</div><!-- --><div class="head-item">5</div> </div>3. Sử dụng ký quỹ âm
Giải pháp thứ ba khá đơn giản hơn, tuy nhiên nó cũng có thể dẫn đến kết quả không mong muốn. Vì chúng tôi có Khoảng cách giữa các div, bạn có thể xóa nó bằng cách sử dụng thuộc tính lề âm trên phần tử của mình
<div class="header"> <div class="head-item">1</div> <div class="head-item">2</div> <div class="head-item">3</div> <div class="head-item">4</div> <div class="head-item">5</div> </div> <style> .head-item { width: 50px; height: 50px; text-align: center; display: inline-block; border: 1px solid gray; } .head-item:not(:first-child) { margin-left: -4px; } </style>4. Monkeypatch cỡ chữ gốc thành 0
Phương pháp cuối cùng bao gồm một sửa đổi gây tò mò và có lẽ không phải là lựa chọn tốt nhất cho dự án của bạn. Giải pháp này có liên quan đến kích thước phông chữ của vùng chứa các phần tử khối nội tuyến của bạn, trong trường hợp này, bạn cần đặt font-size vùng chứa của mình thành 0 (khoảng trắng có cỡ chữ 0 bằng với phần tử chiều rộng 0) và chỉ định . Trong trường hợp của chúng tôi với đánh dấu ví dụ, chúng tôi sẽ cần sửa đổi tiêu đề và lớp head-item với các giá trị sau
<div class="header"> <div class="head-item">1</div> <div class="head-item">2</div> <div class="head-item">3</div> <div class="head-item">4</div> <div class="head-item">5</div> </div> <style> .header { /* Set container font-size */ font-size: 0; } .head-item { width: 50px; height: 50px; text-align: center; display: inline-block; border: 1px solid gray; /* Force font-size of child elements */ font-size: 16px; } </style>Điều này cũng sẽ khắc phục vấn đề của chúng tôi. Việc sử dụng phương pháp nào hoàn toàn phụ thuộc vào bạn. Khối nội tuyến thực sự hữu ích trong một số trường hợp, tuy nhiên, điều quan trọng là phải biết cách đối phó với khoảng cách khó chịu đó hoặc học cách chung sống với nó