Verhindern, dass inline-block aus der Verpackung aber damit die content-wrap

Habe ich dieses 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>

Ich habe es geschafft, stoppen Sie die ul umgebrochen wird, ist ein Anfang. Wird jedoch der Inhalt in der 2. li weiter vom Bildschirm. Überlappende seiner übergeordneten Elemente etc.

Brauche ich die 2. li Aufnahme der Locker und dynamisch in der Breite im Gegensatz zu der ersten li. Und ich brauche den text zu umbrechen, innerhalb der 2.li.

  • Tun, müssen Sie nur deaktivieren Sie die Verpackung für den ersten Punkt der Liste? Sie konnte einfach legen Sie white-space: nowrap; für Sie, und nicht in der Liste container ganz.
  • Es ist ein Bild in der ersten Listenpunkt und text in der zweiten. Also ich bin nur besorgt über die 2. Liste-Element Verpackung.
InformationsquelleAutor HGPB | 2011-10-28
  1. 9
    li {display:table;}

    ist dein Freund. Auch, vergessen Sie nicht, entfernen der inline-Stile!

    • Könntest du bitte ein Beispiel geben?
    InformationsquelleAutor Timidfriendly
  2. 5

    Versuchen white-space: normal auf die li Elemente.

    white-space ist per default vererbt, so erhielten Sie nowrap von der ul.

    Ich fange an zu denken, dass Sie eine ul für layout-Zwecke, die div könnte besser sein geeignet für:

    <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%;
}
    • Vielen Dank - es scheint nur für mich, wenn ich eine Feste Breite als gut. Ich nicht wirklich wollen, geben Sie eine Breite für die 2. li.
    • Können Sie angeben, was Sie wollen, dann? Da bin ich angefangen zu glauben, Sie könnten mit der ul für layout-Zwecke eher als eine Liste. Und wenn ja, dann vielleicht einige schwimmende divs könnte das besser tun.
    • Erste li hält ein Bild der zweiten li halten sollte wrapable text. Die zweite li kann wachsen und schrumpfen in der Größe abhängig von der Bildschirmauflösung.
    • Das klingt wie ein div mit einem Hintergrundbild und padding auf der linken Seite zu mir. Bedenken Sie: <div id="x">text text text</div> und #x {padding-left: 200px; background-image: url(myimage.jpg);}
    • Nein, es ist nicht ein hintergrund Bild. Es ist ein Vordergrund-Bild. Machen Sie ein Hintergrundbild möglicherweise richtig angezeigt, aber das ist ein hack und semantisch falsch.
    InformationsquelleAutor Bazzz
  3. 0

    Klingt wie Sie könnte wirklich wollen, um eine Tabelle zu verwenden.

    Anders, wenn Sie wissen, die Breite des Bildes, schwebt es nach Links und gib das nächste element einen linken Rand, der größer als oder gleich der Breite des Bildes.

    Beispiel:

    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>

    InformationsquelleAutor ma11hew28
  4. 0

    Dies ist ein praktischer Anwendungsfall für CSS Grid Layout:

    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>

    Schafft zwei-Spalten-raster mit 10px Spalte Lücke. Erste grid-Element hat 200px Breite passend zu Ihrem image und der zweiten Umhüllung text.

    Wenn Sie Inhalte, die Sie versuchen zu wickeln enthalten möglicherweise lange Zeichenfolgen wie eine absolute URL oder wissenschaftliche/medizinische Begriffe wie pneumonoultramicroscopicsilicovolcanoconiosis hinzufügen overflow-wrap der zweiten li mit der :last-of-type pseudo-Klasse.

    InformationsquelleAutor Josh Habdas
Schreibe einen Kommentar