Prevenire blocco in linea da imballaggio, ma consentire al contenuto di avvolgere

Finora ho questo layout:Prevenire blocco in linea da imballaggio, ma consentire al contenuto di avvolgere

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

Sono riuscito a fermare il ul da avvolgimento che è un inizio. Tuttavia, il contenuto del secondo li continua fuori dallo schermo. Sovrapposizione dei suoi elementi padre ecc.

Ho bisogno del 2o li di riprendere il gioco ed essere dinamico in larghezza a differenza del primo li. E ho bisogno del testo per avvolgere all'interno del 2 ° li.

Grazie per qualsiasi aiuto.

fonte

2011-10-28 HGPB

Avete solo bisogno di disabilitare il confezionamento per il primo elemento della lista? Si può semplicemente impostare 'white-space: nowrap;' per questo, e non il contenitore della lista nel suo insieme. – unclenorton

C'è un'immagine nella prima voce dell'elenco e il testo nella seconda. Quindi sono solo preoccupato per il 2 ° fascicolo dell'elenco. – HGPB

li {display: table;} è tuo amico.

p.s. Non dimenticare di rimuovere gli stili in linea!

fonte

2012-11-29 14:05:40 Timidfriendly

Provare white-space: normal sugli elementi li.

white-space è ereditato per impostazione predefinita in modo che hanno ricevuto nowrap dal ul.

sto iniziando a pensare che si sta utilizzando un ul a scopo di impaginazione che div potrebbe essere più adatto per:

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

fonte

2011-10-28 12:53:56 Bazzz

Grazie - sembra funzionare solo per me, se aggiungo anche una larghezza fissa. Non voglio davvero aggiungere una larghezza al 2 ° li. – HGPB

Puoi specificare cosa vuoi allora? Perché sto iniziando a pensare che potresti usare 'ul' per scopi di layout piuttosto che creare una lista. E se è così allora forse qualche "div" fluttuante potrebbe fare meglio il lavoro. – Bazzz

Per prima cosa detiene un'immagine il secondo li deve contenere testo avvolgente. Il secondo li può crescere e ridursi in dimensioni dipendenti dalla risoluzione dello schermo. – HGPB

Sembra che potresti voler utilizzare un tavolo.

Altrimenti, se si conosce la larghezza dell'immagine, spostarla a sinistra e assegnare all'elemento successivo un margine sinistro maggiore o uguale alla larghezza dell'immagine.

Ad esempio:

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>

fonte

2015-09-02 00:07:14 ma11hew28

Prevenire blocco in linea da imballaggio, ma consentire al contenuto di avvolgere

risposta

Problemi correlati