Hintergrundfarbe verschwinden, wenn ich Überlauf löschen: versteckte Eigenschaft von li {}

Ich versuche eine einfache Liste Layout, wenn ich die overflow:hidden von li {} löschen, verschwindet die Hintergrundfarbe einfach. Da ich neu in CSS bin, könnte ich herausfinden, warum das passiert.Hintergrundfarbe verschwinden, wenn ich Überlauf löschen: versteckte Eigenschaft von li {}

<!DOCTYPE html> 
<html> 

    <style> 
     ol { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      background-color: green; 
      overflow: hidden; 
     } 

     li { 
      float: left 
     } 

     a{ 
      display: inline-block; 
      color: white; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
     } 

     li:hover { 
      background-color: red; 
     } 


    </style> 

    <body> 
     <ol> 
      <li><a class="active" href="#home">Home</a></li> 
      <li><a href="#iPhone">iPhone</a></li> 
      <li><a href="#iPad">iPad</a></li> 
     </ol> 
    </body> 
</html>

Quelle

2016-08-02 Thor

Es ist ein 'klar lesen. Der 'ol' kann die Höhe des' li' nicht angeben, da sie schwebend sind – Andrew

Da Sie float verwenden, müssen Sie den Container mit 'overflow: hidden' bedecken, um die untergeordneten Elemente zu bedecken, oder Sie können den clearfix-Tipp verwenden: https://css-tricks.com/snippets/css/clear-fix/, aber du könntest auch dein li in 'display: inline-block;' setzen anstatt – shwarp

Vielen Dank für die Hilfe! aber ich bin immer noch ein wenig verwirrt darüber, warum das passiert? Könntest du es bitte etwas genauer erklären? Entschuldigung für solch ein Noob – Thor

Wenn Sie Schwimmer verwenden, bedenken Sie, dass Sie clear:both verwenden. Der Grund, warum wir clear verwenden, ist, dass die float -Eigenschaft den Fluss des HTML-Elements unterbricht und sie entsprechend dem Wert (links, rechts) verschiebt. In Ihrem Fall haben Sie float verwendet: left bedeutet, dass alle li in einer Zeile stehen Wenn der Platz nicht abgedeckt wird, wird ein Leerraumproblem erzeugt und der Leerraum, den wir verwenden, wird gelöscht: beide, so dass alle verbleibenden Leerstellen durch die Verwendung von abgedeckt werden. clear: both.

Siehe here Ich habe div verwendet, um Leerzeichen zu entfernen. both` Problem:

Weitere Einzelheiten können Sie here und für detaillierte Informationen siehe here und here

Quelle

2016-08-02 12:22:05

https://jsfiddle.net/u8v8ae9c/

Die float:left; auf li-Tags wird das Problem verursacht.

Quelle

2016-08-02 12:16:49 Maharkus

Also sollten wir den Schwimmer entfernen ?? anstatt das Problem zu lösen ?? OP ist neu und wir können nicht vergessen Float zu sagen. –

Ja, ich habe mir die Kommentare zu der Frage gelehrt, die Erklärung war genug und ich gab nur eine klare Antwort, aber anscheinend lag ich falsch. 1+ Deine Antwort – Maharkus

Sie haben das Element li nach links verschoben. Stattdessen können Sie verwenden

Anzeige: Inline-Block;

ol { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     background-color: green; 
    } 

    li { 
     display:inline-block; 
    } 

    a{ 
     display: inline-block; 
     color: white; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li:hover { 
     background-color: red; 
    }

FIDDLE: https://jsfiddle.net/u44Loz5z/

Quelle

2016-08-02 12:18:15 Abhishek

Hintergrundfarbe verschwinden, wenn ich Überlauf löschen: versteckte Eigenschaft von li {}

Antwort

Verwandte Themen