Articles of css

FontAwesome Ersetzung auf -Tag zeigt leeres Quadrat

Versucht, den Aufzählungszeichen-Typ auf einem Listenelement-Tag durch ein Font Awesome-Symbol zu ersetzen, aber ich erhalte ein leeres Quadrat: HTML List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 CSS ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: “FontAwesome”; content: “\f058”; margin: 0 5px 0 […]

Wie man Knopf wie einen Link aussehen lässt?

Ich muss eine Schaltfläche wie einen Link mit CSS aussehen lassen. Die Änderungen sind abgeschlossen, aber wenn ich darauf klicke, wird es so angezeigt, als ob es wie in einer Taste gedrückt wird. Irgendeine Idee, wie man das entfernt, so dass der Button auch als Link funktioniert, wenn er angeklickt wird?

React.js Best Practices für Inline-Stile

Mir ist bewusst, dass Sie Stile in React-classn wie folgt angeben können: var MyDiv = React.createClass({ render: function() { var style = { color: ‘white’, fontSize: 200 }; return Have a good and productive day! ; } }); Soll ich auf diese Weise alles gestalten und habe überhaupt keine Stile in meiner CSS-Datei? Oder sollte […]

Bootstrap 3 Reduzieren Sie den Show-Status mit dem Chevron-Symbol

Unter Verwendung des corebeispiels aus der Bootstrap 3-Javascript- Beispielseite für Ausblenden konnte ich den Status des Kollapses mithilfe von Chevron-Symbolen anzeigen. Ich arbeite mit: $(‘#accordion .accordion-toggle’).click(function (e) { var chevState = $(e.target).siblings(“i.indicator”).toggleClass(‘glyphicon-chevron-down glyphicon-chevron-up’); $(“i.indicator”).not(chevState).removeClass(“glyphicon-chevron-down”).addClass(“glyphicon-chevron-up”); }); Das funktioniert (nicht vollständig in allen Browsern getestet), aber ich frage mich, ob es eine elegantere Lösung dafür gibt? Idealerweise […]

Der Unterschied zwischen Prozent- und Fr-Einheiten im CSS-Rasterlayout

Ich spiele mit CSS Grid Layout herum und stoße auf eine Frage, auf die ich keine Antwort finden kann. Betrachten Sie das folgende Beispiel: :root { –grid-columns: 12; –column-gap: 10px; –row-gap: 10px; } .grid { display: grid; grid-template-columns: repeat(var(–grid-columns), calc(100% / var(–grid-columns))); grid-column-gap: var(–column-gap); grid-row-gap: var(–row-gap); justify-content: center; } [class*=l-] { border: 1px solid red; […]

wordwrap eine sehr lange Zeichenfolge

Wie können Sie eine lange Zeichenfolge, eine Website-Adresse, ein Wort oder eine Gruppe von Symbolen mit automatischen Zeilenumbrüchen anzeigen, um eine div-Breite zu erhalten? Ich schätze mal ein paar Worte. Normalerweise funktioniert das Hinzufügen eines Space, aber gibt es eine CSS-Lösung wie Word-Wrap? Zum Beispiel überschneidet es sich (sehr nastly) mit divs, Kräfte horizontal Scrollen […]

Hintergrundbild mit CSS3 Animationen ändern

Warum funktioniert das nicht? Was mache ich falsch? CSS @-webkit-keyframes test { 0% { background-image: url(‘frame-01.png’); } 20% { background-image: url(‘frame-02.png’); } 40% { background-image: url(‘frame-03.png’); } 60% { background-image: url(‘frame-04.png’); } 80% { background-image: url(‘frame-05.png’); } 100% { background-image: url(‘frame-06.png’); } } div { float: left; width: 200px; height: 200px; -webkit-animation-name: test; -webkit-animation-duration: 10s; […]

Soll ich Max-Device-Breite oder Max-Breite verwenden?

Bei CSS-Medienabfragen können Sie mit der max-device-width maximum” eine Gerätebreite (z. B. ein iPhone oder Android-Gerät) und / oder eine max-width eine Seitenbreite festlegen. Wenn Sie die max-device-width und die Größe des Browserfensters auf Ihrem Desktop ändert, ändert sich das CSS nicht, da Ihr Desktop die Größe nicht ändert. Wenn Sie max-width , wenn Sie […]

Offset-Spalten funktionieren nicht (Bootstrap v4.0.0-beta)

Ich benutze Boostrap 4 (Bootstrap v4.0.0-beta) Beta und Probleme mit Offset-Spalten. Früher habe ich offset-md- * gemacht und es hat funktioniert, mit BS4 Beta wird das laut Dokumentation entfernt. Die neue Methode, die in Docs erwähnt wird, benutzt .ml-auto , wenn ich versuche, es mit Col-md-4 zu verwenden, wird es 4 Spalten versetzen. Was ich […]

IE8 Display Inline-Block funktioniert nicht

Sagen wir, ich habe den folgenden Code span, ul, ul li { display: inline-block; vertical-align: top; margin: 0; padding: 0; list-style: none; } i would want this on one line. Ich möchte, dass dies in IE8 inline angezeigt wird. Überall, wo ich alles gelesen habe sagt, das sollte funktionieren, IE8 unterstützt Inline-Block. Jedoch nach einem […]