Prevent inline blok od owijania ale pozwalają zawartość zawinąć

Do tej pory mam ten układ:Prevent inline blok od owijania ale pozwalają zawartość zawinąć

<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>

udało mi się zatrzymać ul od opakowania, które jest początkiem. Jednak treść w drugim li jest kontynuowana poza ekranem. Nakładające się na siebie elementy nadrzędne itp.

Potrzebuję drugiego li, aby uzyskać luzy i mieć dynamiczną szerokość w przeciwieństwie do pierwszego li. I potrzebuję tekstu do zawinięcia wewnątrz 2. li.

Dzięki za pomoc.

Źródło

2011-10-28 HGPB

Czy wystarczy tylko wyłączyć zawijania do pierwszego elementu listy? Można dla niego ustawić 'white-space: nowrap;', a nie cały kontener listy. – unclenorton

Na pierwszym elemencie listy znajduje się obraz, a w drugim - tekst. Martwię się tylko o zawijanie drugiego elementu listy. – HGPB

li {display: table;} jest twoim przyjacielem.

p.s. Nie zapomnij usunąć wbudowanych stylów!

Źródło

2012-11-29 14:05:40 Timidfriendly

Wypróbuj white-space: normal na elementach li.

white-space jest domyślnie dziedziczony, więc otrzymali nowrap od ul.

Zaczynam myśleć, że używasz ul celach układ który div mogą być lepiej dostosowane do:

<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%; 
}

Źródło

2011-10-28 12:53:56 Bazzz

Dzięki - wydaje mi się, że działa to tylko dla mnie, jeśli dodaję również stałą szerokość. Naprawdę nie chcę dodawać szerokości do drugiego li. – HGPB

Czy możesz określić, co chcesz? Ponieważ zaczynam myśleć, że możesz użyć 'ul' dla celów układu, zamiast tworzyć listę. A jeśli tak, to może niektóre pływające 'div's mogą lepiej wykonywać tę pracę. – Bazzz

Pierwszy li zawiera obraz, a drugi li powinien zawierać tekst do zniesienia. Drugi li może rosnąć i zmniejszać się w zależności od rozdzielczości ekranu. – HGPB

Wygląda na to, że możesz chcieć użyć tabeli.

W przeciwnym razie, jeśli znasz szerokość obrazu, ułóż go w lewo i nadaj lewemu pierwszemu elementowi większy lub równy szerokości obrazu.

Na przykład:

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>

Źródło

2015-09-02 00:07:14 ma11hew28

Prevent inline blok od owijania ale pozwalają zawartość zawinąć

Odpowiedz

Powiązane problemy