Ich habe eine (XHTML Strict) Seite, auf der ich ein Bild neben regulären Textabschnitten schwebe. Alles geht gut, außer wenn eine Liste anstelle von Absätzen verwendet wird. Die Aufzählungszeichen der Liste überlappen das schwebende Bild.

Das Ändern des Randes der Liste oder der Listenelemente hilft nicht. Der Rand wird von der linken Seite berechnet, aber der Schwimmer drückt die Listenelemente nach rechts innerhalb der liselbst. Der Rand hilft also nur, wenn ich ihn breiter als das Bild mache.

Das Schweben der Liste neben dem Bild funktioniert auch, aber ich weiß nicht, wann sich die Liste neben einem Float befindet. Ich möchte nicht jede Liste in meinem Inhalt schweben lassen, nur um dies zu beheben. Wenn Sie nach links schweben, wird das Layout durcheinander gebracht, wenn ein Bild nach rechts statt nach links in der Liste verschoben wird.

Durch die Einstellung werden li { list-style-position: inside }die Aufzählungszeichen zusammen mit dem Inhalt verschoben, aber es wird auch veranlasst, dass Zeilen, die umbrochen werden, mit dem Aufzählungszeichen ausgerichtet werden, anstatt mit der obigen Zeile ausgerichtet zu werden.

Das Problem wird offensichtlich dadurch verursacht, dass die Kugel außerhalb der Box gerendert wird und der Schwimmer den Inhalt der Box nach rechts drückt (nicht die Box selbst). So gehen IE und FF mit der Situation um und soweit ich weiß, nicht falsch gemäß Spezifikation. Die Frage ist, wie kann ich das verhindern?

Ich habe eine Lösung für dieses Problem gefunden. Durch Anwenden von a ul { overflow: hidden; }auf wird ulsichergestellt, dass die Box selbst vom Schwimmer anstelle des Inhalts der Box beiseite geschoben wird.

Nur IE6 benötigt ul { zoom: 1; }in unseren bedingten Kommentaren ein, um sicherzustellen, dass das ulLayout vorhanden ist.

Hinzufügen einer Verbesserung zu Glen E. Iveys Lösung :

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​

http://jsfiddle.net/mblase75/TJELt/

Ich bevorzuge diese Technik, da sie funktioniert, wenn die Liste um das schwebende Bild herum fließen muss, während die overflow: hiddenTechnik dies nicht tut. Es ist jedoch auch notwendig, die zu ergänzen, um padding-right: 1emzu verhindern li, dass sie ihren Behälter überlaufen.

Hier kommt die Eigenschaft "display" zur Geltung. Stellen Sie das folgende CSS ein, damit die Liste neben dem schwebenden Inhalt funktioniert.

Anzeige: Tabelle; arbeitet neben schwebenden Inhalten (füllt die Lücke), ohne jedoch Inhalte dahinter zu verbergen. Ähnlich wie ein Tisch :-)

.img {
  float: left;
}

.table {
  display: table;
}

<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>
<ul class="table">
  <li>Test content</li>
  <li>Test content</li>
  <li>Test content</li>
</ul>

BEARBEITEN: Denken Sie daran, eine Klasse hinzuzufügen, um zu isolieren, für welche Listen Sie dies tun möchten. ZB "ul.in-content" oder allgemeiner ".content ul"

Versuchen Sie es mit list-style-position: inside , um das Layout der Aufzählungszeichen zu ändern.

Unter http://archivist.incutio.com/viewlist/css-discuss/106382 habe ich einen Vorschlag gefunden, der für mich funktioniert hat: Gestalten Sie die 'li'-Elemente mit:

position: relative;
left: 1em;

Wo Sie "1em" durch die Breite des linken Abstandes / Randes ersetzen, den Ihre Listenelemente hätten, wenn der Float nicht vorhanden wäre. Dies funktioniert in meiner Anwendung hervorragend, selbst wenn der untere Teil des Gleitkommas in der Mitte der Liste liegt - die Aufzählungszeichen werden wieder auf den (lokalen) linken Rand genau nach rechts verschoben.

Warum overflow: hidden funktioniert

Die Lösung ist so einfach wie:

ul {overflow: hidden;}

Ein overflow:anderes Blockfeld als erstellt visible einen neuen Blockformatierungskontext für seinen Inhalt. W3C-Empfehlung: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Beispiel

Die Schaltflächen auf meiner Website , die sich <li>verkleiden, sind wie folgt gestaltet. Verkleinern Sie das Ansichtsfenster (Fenster) Ihres Browsers, um den Einzug in Aktion zu sehen .

Verwandte Antworten

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

Artikel mit Beispielen

• Überlauf - ein geheimer Vorteil

Durch Hinzufügen overflow: auto;zu Ihremul Sie zumindest für mich Werken .

Aktualisieren

Ich habe meine jsfiddle aktualisiert, um zu visualisieren, was los ist. Wenn Sie das ulneben dem Floating haben img, wird der Inhalt des ulvom Float verschoben, nicht jedoch vom eigentlichen Container. Durch Hinzufügen overflow: autoder gesamten ulBox wird der Float anstelle nur des Inhalts verschoben.

Sie könnten zuweisen position: relative; left: 10px;zu dem li. (Möglicherweise möchten Sie es zusätzlich mit einem versehen margin-right: 10px;, da es sonst auf der rechten Seite zu breit wird.)

Oder wenn Sie floatfür die ul- wie von anderen vorgeschlagen - verwenden möchten, können Sie wahrscheinlich verhindern, dass der Rest rechts von der Ul schwebt, indem Sie clear: leftdas Element verwenden, das der Ul folgt.

Ich benutze dies, um dieses Problem zu lösen:

ul {
   display: table;
}

Haftungsausschluss

Listen neben schwebenden Elementen verursachen Probleme. Meiner Meinung nach besteht der beste Weg, um diese Art von schwebenden Problemen zu vermeiden, darin, schwebende Bilder zu vermeiden, die sich mit Inhalten überschneiden. Dies ist auch hilfreich, wenn Sie Responsive Design unterstützen müssen.

Ein einfaches Design mit zentrierten Bildern zwischen Absätzen sieht sehr attraktiv aus und ist viel einfacher zu unterstützen als der Versuch, zu ausgefallen zu werden. Es ist auch einen Schritt von einem entfernt <figure>.

Aber ich möchte wirklich schwebende Bilder!

Ok, wenn Sie verrückt genug sind, um diesen Weg fortzusetzen, gibt es ein paar Techniken, die verwendet werden können.

Am einfachsten ist die Liste Gebrauch zu machen overflow: hiddenoder overflow: scrollso , dass die Liste im Wesentlichen eingeschrumpft , welche auf die Polsterung zurück zieht , wo es nützlich ist :

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Diese Technik hat jedoch einige Probleme. Wenn die Liste lang wird, wird sie nicht wirklich um das Bild gewickelt, was den gesamten Zweck der Verwendung floatauf dem Bild ziemlich zunichte macht.

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Aber ich möchte wirklich Listen einpacken!

Ok, wenn Sie noch verrückter und hartnäckiger sind und diesen Weg unbedingt fortsetzen müssen , gibt es eine andere Technik, mit der Sie die Listenelemente umschließen und Aufzählungszeichen verwalten können.

Anstatt das aufzufüllen <ul>und zu versuchen, es dazu zu bringen, sich gut mit Kugeln zu verhalten (was es anscheinend nie zu wollen scheint), nehmen Sie diese Kugeln vom <ul>und nehmen Sie sie dem <li>s. Kugeln sind gefährlich und die <ul>einfach nicht verantwortlich genug, um sie richtig zu handhaben.

img {
  float: left;
}
.wrapping-list {
  padding: 0;
  list-style-position: inside;
}
.wrapping-list li {
  overflow: hidden;
  padding-left: 25px;
}

<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

Dieses Umhüllungsverhalten kann bei komplexen Inhalten seltsame Dinge bewirken, daher empfehle ich nicht, es standardmäßig hinzuzufügen. Es ist viel einfacher, es als etwas einzurichten, für das man sich entscheiden kann, als als etwas, das überschrieben werden muss.

Versuchen Sie Folgendes auf Ihrem UL-Tag. Dies sollte sich um die Kugeln kümmern, die Ihr Bild überlagern, und Sie müssen Ihre durch verursachte Linksausrichtung nicht durcheinander bringen list-position: inside.

overflow: hidden; 
padding-left: 2em; 

Ich habe selbst damit gekämpft. Das Beste, was ich geschafft habe, ist Folgendes:

ul {
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

Der Text ist nicht wirklich eingerückt, aber die Kugel zeigt.

Bearbeitet, um basierend auf dem Kommentar von OP zu aktualisieren

ok, dann zerlege es einfach in 2 zusammen verschachtelte Divs

ul  {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }

<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul> 
<div>
the rest now under the UL
</div>

Versuchen Sie, die ul li css auf zu ändern

ul {float: left; Hintergrund: blau; }}

Nachdem ich in mehreren Projekten mit diesem interessanten Problem gekämpft und untersucht habe, warum es passiert, glaube ich endlich, dass ich beides gefunden habe: eine funktionierende und eine reaktionsschnelle Lösung.

Hier ist der Zaubertrick, Live-Beispiel: http://jsfiddle.net/superKalo/phabbtnx/

ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}

Bei der Arbeit in einem LMS ohne Zugriff auf den Dokumentenkopf war es einfacher, margin-right: 20pxeinen Inline-Stil für das Bild zu verwenden. Was ich dieser Seite schulde .

Versuche dies:

li{
    margin-left:5px;
}

Wenn Sie möchten, dass sie nach links gehen, geben Sie einfach einen - ## px-Wert ein.

oder Sie könnten dies tun:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

und dann entfernen Sie das gesamte Styling von der li

Wie wäre es damit?

ul{float:left; clear:right}

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

Rand-Links: Auto bewirkt, dass das Element selbst rechtsbündig ausgerichtet wird. Stellen Sie die Höhe und Breite des gewünschten Elements ein - in meinem Fall handelt es sich um ein Hintergrundbild in einem Div im Inneren

Sie können auch versuchen, das ulnach links zu schweben und ein geeignetes zu definierenwidth zu , damit sie neben dem Bild schwebt.

So etwas wie diese Geige ?

Ich habe es mit behoben

div.class-name ul {
  clear: both;
}

width: auto; overflow: hidden;

Hinzufügen display:table; zu ul:

ul{display:table;}