Xóa khối nội tuyến?

Question

Tôi đã

.centered-holder { 
    margin-left: auto; 
    margin-right: auto; 
    clear: left; 
    display: inline-block; 
} 

Sau đó

<div class="centered-holder">misc content 1</div> 
<div class="centered-holder">misc content 2</div> 
<div class="centered-holder">misc content 3</div> 

Tôi chỉ muốn một tối đa trên mỗi dòng, điều này thực sự có thể bằng cách nào đó? Đó là một ứng dụng iPhone HTML5 để hạn chế trình duyệt cũ hơn không phải là vấn đề.

Answer 1

Depend tờ khai CSS của bạn và đánh dấu của bạn, nhưng bạn có thể cố gắng để đưa tuyên bố CSS này trên thùng mẹ:

white-space: pre-line; 

Với phương pháp này bạn tránh để chuyển đổi .centered-holder đến một yếu tố ngăn chặn, và bạn vẫn có thể sử dụng ví dụ: text-align:center trên vùng chứa chính.

---

pre-line - Giá trị này sẽ gây ra các chuỗi khoảng trắng sụp đổ thành một nhân vật không gian duy nhất. Ngắt dòng sẽ xảy ra ở bất kỳ nơi nào cần thiết để điền vào các hộp dòng và tại các dòng mới trong đánh dấu (hoặc tại lần xuất hiện của "\ a" trong nội dung được tạo). Nói cách khác, nó giống như bình thường ngoại trừ việc nó sẽ tôn vinh ngắt dòng rõ ràng.

Bạn có thể tìm thêm thông tin ở đây về white-space:

• http://reference.sitepoint.com/css/white-space
• http://www.w3.org/TR/css3-text/#white-space

---

Để hoàn tất, bạn có thể sử dụng các tờ khai CSS:

.parent-container { 
    white-space: pre-line /* Create new line for each DIV */; 
    line-height:0 /* Mask the extra lines */; 
    *white-space: pre /*FixIE7*/; 
    *word-wrap: break-word /*FixIE7*/; 
} 

.centered-holder { 
    display: inline-block; 
    line-height:100% /* Restore a default line-height */; 
    *display: inline /*FixIE7*/; 
    *zoom: 1 /*FixIE7*/; 
} 

Tôi thấy câu hỏi này rất thú vị, vì vậy tôi cũng cung cấp các khai báo CSS cho IE6-7 (pre-line và inline-block các bản sửa lỗi). Nó phải hữu ích cho một số người khác có vấn đề tương tự.

Answer 2

Nếu bạn xóa display: inline-block;, chúng sẽ chồng xếp chồng lên nhau.

Yếu tố cấp khối bắt đầu trên một dòng mới và DIV là cấp khối theo mặc định.

Answer 3

Hoặc bạn chỉ có thể thêm một div duy nhất có khối hiển thị sau khối nội tuyến.

.centered-holder { 
    margin-left: auto; 
    margin-right: auto; 
    clear: left; 
    display: inline-block; 
} 
.clear-inline { 
    display: block; 
} 

Sau đó

<div class="centered-holder">misc content 1</div> 
<div class="clear-inline"></div> 
<div class="centered-holder">misc content 2</div> 
<div class="clear-inline"></div> 
<div class="centered-holder">misc content 3</div> 
<div class="clear-inline"></div>