Evitare inline block per avvolgere, ma consentire al contenuto di avvolgere

Ho questo layout:

<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 avvolgere che è un inizio. Tuttavia, il contenuto del 2 ° li continua a schermo spento. La sovrapposizione di suo padre elementi etc.

Ho bisogno di 2 ° li per prendere l’allentamento e dinamica in larghezza a differenza del primo li. E ho bisogno il testo a capo all’interno del 2°li.

  • Hai solo bisogno di disabilitare il capo per il primo elemento della lista? Si può solo impostare white-space: nowrap; per esso, e non il contenitore di lista nel suo complesso.
  • C’è un’immagine del primo elemento dell’elenco e il testo nella seconda. Così io sono solo preoccupato per il 2 ° elemento di elenco di avvolgimento.
InformationsquelleAutor HGPB | 2011-10-28

 

4 Replies
  1. 9
    li {display:table;}

    è tuo amico. Inoltre, non dimenticare di rimuovere inline-stili!

    • Si potrebbe si prega di fornire un esempio?
  2. 5

    Provare white-space: normal sul li elementi.

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

    Sto iniziando a pensare che si sta utilizzando un ul per il layout 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%;
    }
    • Grazie, sembra funzionare solo per me, se posso aggiungere una larghezza fissa così. Non voglio aggiungere una larghezza di 2 ° li.
    • Potete specificare ciò che si vuole allora? Perché sto cominciando a pensare che si potrebbe essere utilizzando il ul ai fini del layout piuttosto che fare un elenco. E se è così allora forse qualche galleggiante divs potrebbe fare il lavoro migliore.
    • Prima li contiene un’immagine del secondo li dovrebbe tenere wrapable testo. Il secondo li può crescere e ridursi in dimensione a seconda della risoluzione dello schermo.
    • Che suona come un div con una immagine di sfondo e la sinistra imbottitura per me. Considerate questo: <div id="x">text text text</div> e #x {padding-left: 200px; background-image: url(myimage.jpg);}
    • No, non è un’immagine di sfondo. E ‘ una immagine in primo piano. Il che rende un’immagine di sfondo può apparire in modo corretto, ma questo è un hack e semanticamente corretto.
  3. 0

    Suona come si potrebbe effettivamente desidera utilizzare una tabella.

    Altrimenti, se si conosce la larghezza dell’immagine, in modo da visualizzarla a sinistra e a dare il prossimo elemento di un margine sinistro maggiore o uguale alla larghezza dell’immagine.

    Per esempio:

    CSS:

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

    HTML:

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

  4. 0

    Questa è una pratica di un caso d’uso per CSS Layout a Griglia:

    CSS:

    ul {
      display: grid;
      grid-template-columns: 200px 1fr;
      column-gap: 10px;
    }
    li {
      display: unset; /* reset user agent list-style */
    }
    img {
      background: #00bcd4; /* style image background */
    }

    HTML:

    <ul>
    <li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
    <li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
    </ul>

    Crea due colonne della griglia con 10px colonna gap. Primo elemento di griglia ha 200px larghezza per abbinare la vostra immagine e secondo la disposizione del testo.

    Se se il contenuto che si sta cercando di avvolgere può contenere stringhe come un URL assoluto o medico/scientifica termini come pneumonoultramicroscopicsilicovolcanoconiosis aggiungere overflow-wrap per la seconda li utilizzando il :last-of-type pseudo-classe.

Lascia un commento