Tiêu đề Html trong cùng một dòng

Ngoài ra, bạn có thể đặt thuộc tính

    
Box #1
    
Box #2
    
Box #3

3 trên phần tử gốc nếu bạn muốn hiển thị thanh cuộn ngang cho nội dung tràn

Để 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ó trôi chảy), đ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 display: inline-block có thể để lại những khoảng trống không mong muốn giữa các yếu tố, 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. Những đứa 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

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: calc(150px * 3);
    height: 100%;
    overflow: hidden; /* or any clear-fix snippet */
}

Trong ví dụ trên,

#parent {
    width: 100%;
    height: 90px;
    white-space: nowrap;
    overflow-x: auto;
}

0 là 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 phép tính 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ụ

.child {
    float: left;
    width: 150px;
    height: 100%;
    background-color: pink;
}

---

Hy vọng bạn tìm thấy bài viết này hữu ích. Nó được xuất bản vào ngày 01 tháng 7 năm 2016 (và được sửa đổi lần cuối vào ngày 16 tháng 9 năm 2021). Hãy thể hiện tình yêu và sự ủng hộ của bạn bằng cách