Làm thế nào để làm cho một DIV không bọc?

Tôi cần tạo kiểu DIV chứa nhiều DIV khác. Người ta hỏi rằng các DIV này sẽ không bao bọc nếu cửa sổ trình duyệt bị thay đổi kích thước thành hẹp.

Tôi đã cố gắng để làm cho nó hoạt động như dưới đây.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

Điều này hoạt động trong hầu hết các trường hợp. Tuy nhiên, trong một số trường hợp đặc biệt, kết xuất không chính xác. Tôi thấy DIV container thay đổi thành chiều rộng 3000px trong RTL của IE7; và nó trở nên lộn xộn.

Có cách nào khác để làm cho một container DIV không bọc không?

Hãy thử sử dụng white-space: nowrap;theo kiểu thùng chứa (thay vì overflow: hidden;)

Nếu tôi không muốn xác định chiều rộng tối thiểu vì tôi không biết số lượng phần tử, điều duy nhất làm việc với tôi là:

display: inline-block;
white-space: nowrap;

Nhưng chỉ trong Chrome và Safari: /

Sau đây làm việc cho tôi mà không nổi (tôi đã sửa đổi ví dụ của bạn một chút cho hiệu ứng hình ảnh):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Các div có thể được phân tách bằng khoảng trắng. Nếu bạn không muốn điều này, hãy sử dụng margin-right: -4px;thay vì margin: 5px;cho .slide(nó xấu nhưng đó là một vấn đề khó giải quyết ).

Combo bạn cần là

white-space: nowrap

về cha mẹ và

display: inline-block; // or inline

về những đứa trẻ

Điều này làm việc cho tôi:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

overflow: hiddennên cho bạn hành vi đúng. Tôi đoán là nó đã RTLbị rối vì bạn có float: lefttrên divs đóng gói .

Bên cạnh lỗi đó, bạn đã có hành vi đúng.

Cố gắng sử dụng width: 3000px;cho trường hợp IE.

Không ai ở trên làm việc cho tôi.

Trong trường hợp của tôi, tôi cần thêm phần sau vào điều khiển người dùng mà tôi đã tạo:

display:inline-block;

Các min-widthtài sản không hoạt động chính xác trong Internet Explorer, mà rất có thể là nguyên nhân của các vấn đề của bạn.

Đọc thông tin và một tập lệnh tuyệt vời khắc phục nhiều sự cố CSS IE .

bạn có thể dùng

display: table;

cho container của bạn và do đó tránh overflow: hidden;. Nó sẽ thực hiện công việc nếu bạn sử dụng nó chỉ cho mục đích warpping.

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

Sử dụng display:flexvàwhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

Các <span>thẻ được sử dụng để nhóm inline-yếu tố trong một tài liệu.
(nguồn)