Hướng dẫn how do i make text stay on the same line in html? - làm cách nào để làm cho văn bản ở trên cùng một dòng trong html?

• 16 tháng 9 năm 2021
• 3 phút đọc

Sử dụng <div id="parent"> <div class="child">Box #1</div> <div class="child">Box #2</div> <div class="child">Box #3</div> </div> 9

Để có được tất cả các yếu tố xuất hiện trên một dòng cách dễ nhất là:

1. Đặt thuộc tính

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

   0 thành

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

   1 trên phần tử cha;
2. Có

   <div id="parent">
       <div class="child">Box #1</div>
       <div class="child">Box #2</div>
       <div class="child">Box #3</div>
   </div>
   

   9 đặt trên tất cả các yếu tố trẻ em.

Điều này có nghĩa là ở mức tối thiểu, bạn chỉ cần các quy tắc kiểu sau:

#parent { white-space: nowrap; }
.child { display: inline-block; }

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

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

Để chứng minh làm thế nào bạn có thể buộc tất cả các yếu tố trẻ em trên cùng một dòng, ví dụ như đánh dấu sau:

<div id="parent">
    <div class="child">Box #1</div>
    <div class="child">Box #2</div>
    <div class="child">Box #3</div>
</div>

Ví dụ, bạn có thể tạo kiểu cho các yếu 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,

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

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

Xin lưu ý rằng việc sử dụng

<div id="parent">
    <div class="child">Box #1</div>
    <div class="child">Box #2</div>
    <div class="child">Box #3</div>
</div>

Sử dụng các yếu tố nổi

Phương pháp này yêu cầu bạn đặt chiều rộng cố định và ở mức tối thiểu, ba yếu tố sau:

1. Bao bọc: Để xác định khu vực hiển thị cho các yếu tố;: to define the display area for the elements;
2. Phụ huynh: Để xác định các yếu tố nổi có thể chiếm được;: to define the width floated elements can occupy;
3. Trẻ em: Các yếu tố sẽ được thả nổi.: the elements that would be floated.

Ví dụ, đánh dấu của điều này sẽ trông giống như sau:

<div id="wrapper">
    <div id="parent">
        <div class="child">Box #1</div>
        <div class="child">Box #2</div>
        <div class="child">Box #3</div>
    </div>
</div>

Phần tử trình bao bọc có thể được tạo kiểu để xác định khu vực hiển thị, ví dụ, 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

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

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

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

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

#parent {
    width: calc(150px * 3);
    height: 100%;
    overflow: hidden; /* or any clear-fix snippet */
}

Trong ví dụ trên,

.child {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

.child {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

Nếu các yếu tố trẻ em có

.child {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

.child {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

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

.child {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

Là bước cuối cùng, bạn chỉ cần nổi trẻ em, và ở mức tối thiểu đặt

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

.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à lần cuối cùng được sửa đổi ngày 16 tháng 9 năm 2021). Hãy thể hiện tình yêu và sự hỗ trợ của bạn bằng cách chia sẻ bài đăng này.