Để minh họa cách bạn có thể buộc tất cả các phần tử con trên cùng một dòng, hãy xem xét ví dụ về đánh dấu sau
Box #1Box #2Box #3
Ví dụ, bạn có thể tạo kiểu cho các phần tử theo cách tương tự như sau
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }
.child { display: inline-block; width: 50%; height: 100%; background-color: red; }
Trong ví dụ trên,
4 của phần tử cha và phần tử con được đặt theo tỷ lệ phần trăm [để làm cho nó linh hoạt], điều này có thể dễ dàng thay đổi thành bất kỳ đơn vị đo lường nào khác. Ví dụ: bạn có thể sử dụng pixel [Box #1Box #2Box #3
5] cho các phần tử có thể cuộn theo chiều ngang cố định.Box #1Box #2Box #3
Xin lưu ý rằng việc sử dụng
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }8 có thể để lại những khoảng trống không mong muốn giữa các thành phần, tuy nhiên, có nhiều cách để bạn có thể loại bỏ những khoảng trống đó
Sử dụng các phần tử nổi
Phương pháp này yêu cầu bạn đặt chiều rộng cố định và có tối thiểu ba yếu tố sau
- Vỏ bánh. để xác định khu vực hiển thị cho các yếu tố;
- Cha mẹ. để xác định chiều rộng các phần tử nổi có thể chiếm;
- Bọn trẻ. các phần tử sẽ được thả nổi
Ví dụ: phần đánh dấu của cái này sẽ giống như sau
Box #1Box #2Box #3
Phần tử bao bọc có thể được tạo kiểu để xác định vùng hiển thị, chẳng hạn như vậy
#wrapper { width: 300px; height: 90px; background-color: yellow; overflow-x: auto; }
Ở đây, bạn có thể thấy rằng nó có một
4 vàBox #1Box #2Box #3
8 cố định với cuộn ngang khi cần thiết.Box #1Box #2Box #3
Bây giờ, trong phần tử cha, bạn có thể xác định
4 dựa trên số lượng phần tử con mà bạn muốn giữ trên cùng một dòng. Ví dụ: nếu bạn muốn hiển thị hai hộp trong khu vực hiển thị từ tổng số ba hộp, bạn sẽ thực hiện như sauBox #1Box #2Box #3
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }0
Trong ví dụ trên,
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }0 bằng một nửa của
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }1, điều này sẽ cho phép bạn chứa hai hộp trong khu vực trưng bày. Bằng cách này, bạn có thể đặt chiều rộng của phần tử cha bằng chiều rộng của tất cả các phần tử con cộng lại. Điều này giúp đảm bảo rằng tất cả các phần tử nổi nằm trên cùng một dòng
Nếu các phần tử con đã áp dụng
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }2 và
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }3, thì bạn có thể muốn đưa chúng vào tính toán của
4 của cha mẹ hoặc bạn có thể đặtBox #1Box #2Box #3
#parent { width: 100%; height: 90px; white-space: nowrap; overflow-x: auto; }5 cho các phần tử con
Bước cuối cùng, bạn chỉ cần thả nổi bọn trẻ và ít nhất hãy đặt
4 lên chúng. Ví dụBox #1Box #2Box #3