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.
