teilweise Seite nicht richtig CSS-Klasse rendern

Ich habe erstellt. CSS-Klassen zum Erstellen von Kreisen in verschiedenen Farben. Wenn ich die CSS-Klasse in einer Datei verwende, funktioniert es wie erwartet. Aber wenn ich versuche, es in einer eckigen Teilseite zu verwenden, wird es nicht richtig dargestellt?teilweise Seite nicht richtig CSS-Klasse rendern

richtig: falsch:

Hier ist CSS-Klasse für rote Kreise

.red-circle { 
    margin: 40px auto 0; 
    width: 30px; 
    height: 30px; 
    border-radius: 100%; 
    border: 1px solid #c92c09; 
}.red-circle:before, .red-circle:after { 
    content: ''; 
    width: 15px; 
    height: 30px; 
}.red-circle:before { 
    float: left; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    background: #c92c09; 
}.red-circle:after { 
    float: right; 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    background: #c92c09; 
}

Und hier ist, wie es in der richtigen HTML-Seite

<link rel="stylesheet" href="../css/circles.css" type="text/css" /> 
<body>  
     <div class="red-circle"><div> 
    </body>

verwendet wird und Hier ist das HTML, das falsch anzeigt

<div class="container" ng-controller="FieldCtrl"> 
    <link rel="stylesheet" href="../css/circles.css" type="text/css" /> 
    <div class="red-circle"> </div> 
</div>

Quelle

2016-05-17 Bob Cummings

Unklar ist, wie der Fehler zu reproduzieren, obwohl es Beachten Sie, dass der HTML-Code für Ihre "richtige" Version tatsächlich lautet lly ungültig. – Serlite

Fügen Sie einfach position und top und floats entfernen, verwenden Sie stattdessen right und left

CSS

.red-circle { 
    margin: 40px auto 0; 
    width: 30px; 
    height: 30px; 
    border-radius: 100%; 
    border: 1px solid #c92c09; 
    position: relative; 
} 

.red-circle:before, 
.red-circle:after { 
    top: 0; 
    position: absolute; 
    content: ''; 
    width: 15px; 
    height: 30px; 
} 

.red-circle:before { 
    left: 0; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    background: #c92c09; 
} 

.red-circle:after { 
    right: 0; 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    background: #c92c09; 
} 

.container { 
    display: inline-block; 
}

DEMO HERE

Quelle

2016-05-17 16:52:22

Vielen Dank. Ich habe über 4 Stunden verbracht und knallt es sofort. –

teilweise Seite nicht richtig CSS-Klasse rendern

Antwort

Verwandte Themen