Vraag Waarom overlappen mijn lijstitekogels zwevende elementen


Ik heb een (XHTML Strict) -pagina waar ik naast gewone tekstdelen een afbeelding zwevend maak. Alles gaat goed, behalve wanneer een lijst wordt gebruikt in plaats van alinea's. De kogels van de lijst overlappen het zwevende beeld.

Het wijzigen van de marge van de lijst of de lijstitems helpt niet. De marge wordt berekend vanaf de linkerkant van de pagina, maar de zwevende staaf duwt de lijstitems naar rechts binnen de li zelf. Dus de marge helpt alleen als ik deze groter maak dan de afbeelding.

Het zweven van de lijst naast de afbeelding werkt ook, maar ik weet niet wanneer de lijst naast een float staat. Ik wil niet elke lijst in mijn inhoud laten zweven om dit probleem op te lossen. Zwevende links vervaagt ook de lay-out wanneer een afbeelding wordt weergegeven naar rechts in plaats van links van de lijst.

omgeving li { list-style-position: inside } verplaatst de opsommingstekens samen met de inhoud, maar het zorgt er ook voor dat lijnen die omloop beginnen te worden uitgelijnd met de opsommingsteken, in plaats van uitgelijnd op de regel hierboven.

Het probleem wordt duidelijk veroorzaakt doordat de kogel buiten de doos wordt weergegeven, waarbij de vlotter de inhoud van de doos naar rechts duwt (niet de doos zelf). Dit is hoe IE en FF omgaan met de situatie, en voor zover ik weet, niet verkeerd volgens de specificaties. De vraag is, hoe kan ik dit voorkomen?


151
2018-04-02 15:17


oorsprong


antwoorden:


Ik heb een oplossing voor dit probleem gevonden. Een ul { overflow: hidden; } naar de ul zorgt ervoor dat de doos zelf door de vlotter terzijde wordt geschoven, in plaats van de inhoud van de doos.

Alleen IE6 heeft een ul { zoom: 1; } in onze voorwaardelijke opmerkingen om zeker te zijn van de ul heeft lay-out.


258
2018-04-02 15:37



Een verbetering toevoegen aan De oplossing van Glen E. Ivey:

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

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

Ik geef de voorkeur aan deze techniek, omdat deze werkt wanneer de lijst rond het zwevende beeld moet stromen, terwijl de overflow: hidden techniek zal dat niet doen. Het is echter ook noodzakelijk om toe te voegen padding-right: 1em naar de li om te voorkomen dat ze hun container overstromen.


58
2017-08-10 14:48



Dit is waar de "weergave" -eigenschap op zichzelf staat. Stel de CSS hieronder in om de lijst te laten werken naast de zwevende inhoud.

ul
{
    display: table;
}

weergave: tafel; werkt samen met zwevende inhoud (het vullen van de opening), maar zonder inhoud erachter te verbergen. Net als een tafel doet :-)

EDIT: Vergeet niet om een ​​klasse toe te voegen om te isoleren voor welke lijsten u dit wilt doen. Bijv. "ul.in-content" of meer in het algemeen ".content ul"


33
2017-07-02 11:56



Proberen lijst-stijl-positie: binnen om de lay-out van de kogels te wijzigen.


28
2018-04-02 15:26



Op http://archivist.incutio.com/viewlist/css-discuss/106382 Ik vond een suggestie die werkte voor mij: style the 'li' elementen met:

position: relative;
left: 1em;

Waar u "1em" vervangt door de breedte van de linker opvulling / marge die uw lijstitems zouden hebben als de float niet aanwezig was. Dit werkt geweldig in mijn applicatie, zelfs wanneer de onderkant van de float in het midden van de lijsten voorkomt - de kogels schuiven terug naar de (lokale) linkermarge precies goed.


17
2018-02-26 20:57



Door toe te voegen overflow: auto; aan jouw ulwerkt voor mij tenminste.

Bijwerken

Ik ben bijgewerkt mijn jsfiddle om te visualiseren wat er aan de hand is. Bij het hebben van de ul naast de zwevende img, de inhoud van de ul wordt geduwd door de vlotter, maar niet door de eigenlijke container. Door toe te voegen overflow: auto het geheel ul-box wordt geduwd door de float in plaats van alleen de inhoud.


16
2018-04-30 08:10



De oplossing is net zo eenvoudig als:

ul {overflow: hidden;}

Een blokkendoos met overflow: anders dan visible  brengt een nieuwe blokopmaakcontext tot stand voor de inhoud. W3C-aanbeveling: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Voorbeeld:

De knoppen aan mijn website, welke zijn <li> in vermomming zijn zo gemaakt. Maak het kijkvenster (venster) van uw browser kleiner zie de inspringen in actie.

Gerelateerde antwoorden:

Artikel met voorbeelden:


14
2017-08-06 14:14



Je zou kunnen toewijzen position: relative; left: 10px; naar de li. (Misschien wil je het ook een geven margin-right: 10px;, anders wordt het mogelijk te breed aan de rechterkant.)

Of, als u wilt gebruiken float voor de ul - zoals door anderen gesuggereerd - kun je waarschijnlijk voorkomen dat de rest rechts van de ul zweeft door te gebruiken clear: left op het element dat volgt op de ul.


13
2018-05-03 17:13



Ik gebruik dit om dit probleem op te lossen:

ul {
   display: table;
}

7
2017-09-02 11:51



ontkenning

Lijsten naast drijvende elementen veroorzaken problemen. Naar mijn mening is de beste manier om dit soort zwevende problemen te voorkomen, het voorkomen van zwevende afbeeldingen die de inhoud kruisen. Het helpt ook als u responsief ontwerp moet ondersteunen.

Een eenvoudig ontwerp van gecentreerde afbeeldingen tussen paragrafen ziet er heel aantrekkelijk uit en is veel gemakkelijker te ondersteunen dan te chique. Het is ook een stap verwijderd van een <figure>.

Maar ik wil echt zwevende afbeeldingen!

Ok, dus als je dat bent gek hardnekkig genoeg om verder te gaan op dit pad, zijn er een paar technieken die kunnen worden gebruikt.

De eenvoudigste is om de lijst te gebruiken overflow: hidden of overflow: scroll zodat de lijst in essentie in krimpfolie is verpakt, waardoor de opvulling weer terugkomt naar waar het nuttig is:

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>

Deze techniek heeft echter een paar problemen. Als de lijst lang wordt, wikkelt deze niet echt om de afbeelding, wat vrijwel het hele doel van het gebruik verslaat float op de afbeelding.

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>

Maar ik wil echt wikkellijsten!

Ok, dus als je even bent gekker meer persistent en jij absoluut moet ga verder op dit pad, er is nog een techniek die kan worden gebruikt om de lijstitems in te pakken en kogels te onderhouden.

In plaats van de <ul> en probeer het netjes te krijgen met kogels (wat het nooit lijkt te willen doen), neem die kogels weg van de <ul> en geef ze aan de <li>s. Kogels zijn gevaarlijk, en de <ul> is gewoon niet verantwoordelijk genoeg om ze goed te behandelen.

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>

Dit wikkelgedrag kan rare dingen doen met complexe inhoud, dus ik raad het niet aan om het standaard toe te voegen. Het is veel eenvoudiger om het in te stellen als iets dat kan worden aangemeld dan als iets dat moet worden opgeheven.


5
2018-02-26 20:20



Probeer het volgende op uw UL-label. Dit zou moeten zorgen voor de kogels die over je afbeelding heen liggen en je hoeft je linkeruitlijning veroorzaakt door list-position: inside.

overflow: hidden; 
padding-left: 2em; 

4
2018-03-13 19:09