Einrückung für geschachtelte Listenelemente Neben Float-Bild

Question

Ich habe Listen verschachtelt, die neben einem Floating-Bild sitzen. Das gefloatete Bild "verbraucht" den gesamten linken Rand der verschachtelten Liste. Gibt es eine Möglichkeit, es so zu machen, dass die verschachtelte Liste sich von dem Bild nach außen erstreckt, als ob dort kein Bild wäre? Hier

ist ein Screenshot:

Auf der linken Seite haben wir, wie es gemacht wird, wenn es ein Schwimmer ist. Auf der rechten Seite haben wir, wie es gerendert wird, wenn es keinen Float gibt.

Gibt es eine Möglichkeit, die verschachtelten Listenelemente auf die gleiche Weise nach rechts zu stoßen, unabhängig davon, ob ein Bild auf der linken Seite schwebt oder nicht?

Danke!

Answer 1

Sie können dem Untermenü margin-left zuweisen .. aber .. Warum nicht flexbox verwenden?

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 500px; 
 
    border: 1px solid #999; 
 
    background: #F2F2F2; 
 
} 
 
ul { 
 
    margin: 0 30px; 
 
    padding: 0; 
 
} 
 
ul > li + ul { 
 
    margin-left: 20px; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/200x200" alt="Imagen"> 
 
    <div class="flex-uls"> 
 
    <ul> 
 
     <li>Top Item</li> 
 
     <li>Top Item</li> 
 
     <li>Top Item</li> 
 
     <ul> 
 
      <li>SubLevel Item</li> 
 
      <li>SubLevel Item</li> 
 
      <li>SubLevel Item</li> 
 
     </ul> 
 
    </ul> 
 
    </div> 
 
</div>