Làm thế nào để bạn đặt một khoảng trắng trên cùng một dòng trong html?

Các thuộc tính “ ”, “margin-right” và “line-height” của CSS được sử dụng để cung cấp khoảng cách ngang và dọc giữa hai liên kết. Sử dụng điều này, bạn có thể điều chỉnh không gian từ bên phải và bên trái của các liên kết. Trong bài viết này, chúng tôi đã giải thích quy trình tạo khoảng cách giữa hai liên kết bằng hai phương pháp khác nhau và cung cấp các ví dụ liên quan

Để 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 #1
    
Box #2
    
Box #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,

    
Box #1
    
Box #2
    
Box #3

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 #1
    
Box #2
    
Box #3

5) cho các phần tử có thể cuộn theo chiều ngang cố định.

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

1. Vỏ bánh. để xác định khu vực hiển thị cho các yếu tố;
2. Cha mẹ. để xác định chiều rộng các phần tử nổi có thể chiếm;
3. 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 #1
        
Box #2
        
Box #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

    
Box #1
    
Box #2
    
Box #3

4 và

    
Box #1
    
Box #2
    
Box #3

8 cố định với cuộn ngang khi cần thiết.

Bây giờ, trong phần tử cha, bạn có thể xác định

    
Box #1
    
Box #2
    
Box #3

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ư sau

#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

    
Box #1
    
Box #2
    
Box #3

4 của cha mẹ hoặc bạn có thể đặt

#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

    
Box #1
    
Box #2
    
Box #3

4 lên chúng. Ví dụ