Làm thế nào để làm cho một yếu tố nội tuyến xuất hiện trên dòng mới, hoặc khối yếu tố không chiếm toàn bộ dòng?

Question

Tôi không thể tìm ra cách làm điều này với CSS. Nếu tôi chỉ sử dụng một thẻ <br>, nó hoạt động hoàn hảo, nhưng tôi đang cố gắng tránh làm điều đó vì lý do rõ ràng.

Về cơ bản, tôi chỉ muốn các .feature_descspan để bắt đầu trên một dòng mới, nhưng:

• Nếu tôi làm cho nó trở thành một phần tử nội tuyến, nó sẽ không có một dòng-break.
• Nếu tôi tạo thành phần tử khối, nó sẽ mở rộng để vừa với toàn bộ dòng, đặt từng biểu tượng trên một dòng riêng và lãng phí hàng tấn trên màn hình (mỗi .feature_wrapper sẽ có kích thước hơi khác nhau, nhưng không có bao giờ sẽ được rộng như toàn bộ màn hình)

Ví dụ mã:. công trình này, nhưng sử dụng một thẻ br:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/> 
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li> 

tôi muốn phong cách này với CSS để đạt được kết quả tương tự:

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span> 
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li> 

Bất kỳ ý tưởng nào? Hoặc tôi đang đi về điều này một cách sai lầm?

Answer 1

Bạn có thể đặt cho nó khối hiển thị thuộc tính; vì vậy nó sẽ hoạt động giống như một div và có một dòng riêng

CSS:

.feature_desc { 
    display: block; 
    .... 
} 

Answer 2

Mặc dù câu hỏi là khá mờ và các đoạn mã HTML là khá hạn chế, tôi giả sử

.feature_desc { 
    display: block; 
} 
.feature_desc:before { 
    content: ""; 
    display: block; 
} 

sức cung cấp cho bạn muốn bạn muốn đạt được mà không cần phần tử <br/>. Mặc dù nó sẽ giúp xem CSS của bạn áp dụng cho các yếu tố này.

LƯU Ý. Ví dụ trên không hoạt động trong IE7.

Answer 3

Tôi nghĩ rằng phao nổi có thể làm việc tốt nhất cho bạn ở đây, nếu bạn không muốn phần tử chiếm toàn bộ dòng, phao nó còn lại sẽ hoạt động.

.feature_wrapper span { 
    float: left; 
    clear: left; 
    display:inline 
} 

EDIT: bây giờ các trình duyệt có hỗ trợ tốt hơn bạn có thể sử dụng khối nội tuyến.

.feature_wrapper span { 
    display:inline-block; 
    *display:inline; *zoom:1; 
} 

Tùy thuộc vào văn bản căn chỉnh này sẽ xuất hiện như thông qua nội tuyến của nó trong khi cũng hoạt động như một phần tử khối.

Answer 4

Đối với các yếu tố khối không chiếm toàn bộ dòng, thiết lập chiều rộng của nó đến một cái gì đó nhỏ và white-space:nowrap

label 
{ 
    width:10px; 
    display:block; 
    white-space:nowrap; 
}