Ngăn chặn khối inline từ gói nhưng cho phép nội dung để quấn

Question

Cho đến nay tôi có bố trí này:

<ul style="white-space:nowrap;"> 
    <li style="width:200px; display:inline-block;"></li> 
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li> 
</ul> 

Tôi đã cố gắng để ngăn chặn các ul từ gói đó là một sự khởi đầu. Tuy nhiên, nội dung trong 2nd li tiếp tục tắt màn hình. Chồng chéo các phần tử gốc của nó, v.v.

Tôi cần số thứ hai li để chiếm phần lớn và có chiều rộng động không giống như li đầu tiên. Và tôi cần văn bản để bọc trong số 2 li.

Cảm ơn bạn đã được trợ giúp.

Answer 1

li {display: table;} là bạn của bạn.

p.s. Đừng quên xóa kiểu nội tuyến!

Answer 2

Thử white-space: normal trên các yếu tố li.

white-space được kế thừa theo mặc định để chúng nhận được nowrap từ ul.

Tôi bắt đầu nghĩ rằng bạn đang sử dụng một ul cho các mục đích bố trí mà div có thể là phù hợp hơn cho:

<div class="Item"> 
<div class="ImageContainer"><img src="" alt="/></div> 
<div class="TextContainer">Text text text text text</div> 
</div> 

.Item { 
width: 200px; 
overflow: auto; 
} 

.ImageContainer { 
float: left; 
width: 40%; 
} 

.TextContainer { 
float: left; 
width: 60%; 
} 

Answer 3

Có vẻ như bạn thực sự muốn sử dụng bảng.

Nếu không, nếu bạn biết chiều rộng của hình ảnh, hãy thả nó sang trái và cho phần tử tiếp theo lề trái lớn hơn hoặc bằng độ rộng của hình ảnh.

Ví dụ:

article > img { 
 
    float: left; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
article > div { 
 
    margin-left: 90px; 
 
}

<article> 
 
    <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b"> 
 
    <div> 
 
    <h4>Matt Di Pasquale</h3> 
 
    <p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p> 
 
    </div> 
 
</article>