Thuộc tính để các thẻ H1, h2, h3, h4, h5, h6 nằm trên 1 dòng hoặc 1 hàng

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 22/9/14.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Thuộc tính để các thẻ H1, h2, h3, h4, h5, h6 nằm trên 1 dòng hoặc 1 hàng
    • Nhiều bạn lập trình web thường bực bội vấn đề, khi code các thẻ <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> mà ta muốn các thẻ H này tự float với nhau, có nghĩa là các thẻ này tự nằm trên 1 dòng mà không phải xuống dòng. Khi nào chiều rộng đã quá khoảng cách cho phép thì các thẻ H này mới tự động xuống dòng.
    • Vì mặc định các thẻ sẽ tự nhảy xuông dòng.
    • VD: mình code 1 đoạn html như hình dưới
    cach-cho-cac-the-h-nam-tren-1-dong.png
    • Nếu bạn code vậy mặc định các thẻ H sẽ nhảy ở ngoài giao diện như sau:
    cach-cho-cac-the-h-nam-tren-1-dong-hinh2.png
    • Để thẻ H này nằm trên 1 dòng, và khi nào quá chiều rộng cho phép thì nó tự xuống dòng giống hình dưới.
    cach-cho-cac-the-h-nam-tren-1-dong-hinh1.png
    • Để giống được vậy, bạn chỉ cần thêm thuộc tính display: inline cho các thẻ H, tự động chữ sẽ được gôm lại và nằm trên 1 hàng, dòng và khi nào quá chiều rộng cho phép chữ mới tự động xuống dòng.
    HTML:
    h1, h2, h3, h4, h5, h6
    {
          display: inline;
    }
    
     
    Cảm ơn đã xem bài:

    Thuộc tính để các thẻ H1, h2, h3, h4, h5, h6 nằm trên 1 dòng hoặc 1 hàng

    Last edited by a moderator: 12/8/15
  2. yeuseo
    Tham gia ngày:
    15/8/14
    Bài viết:
    92
    Đã được thích:
    1
    Điểm thành tích:
    6
    thanks ad, thead good
     
  3. congtuhole
    Tham gia ngày:
    19/4/16
    Bài viết:
    5
    Đã được thích:
    0
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Cơ bản, dễ hiểu và rất trực quan