Lösung zur Definition der Mindestspannweite hat keine Auswirkung

Das Span-Tag wird häufig beim Erstellen von HTML-Webseiten verwendet, aber manche Freunde wissen nicht, wie man dieses Tag richtig einsetzt. Sie denken, es sei einfach zu verwenden, aber die Verwendung ist mühsam, insbesondere wenn sie seine Breite und Höhe definieren müssen.

Ein Freund hat mich einmal gefragt: „Warum ändern sich Breite und Höhe der Spanne nach der Definition mit CSS immer noch nicht, als wären sie ungültig?“

Tatsächlich ist dieses Problem sehr einfach – zuerst müssen Sie die Eigenschaften von span verstehen, da span ein Inline-Element ist und Inline-Elemente Breite und Höhe ignorieren. Sobald Sie dies verstanden haben, ist die Lösung sehr einfach. Die Lösung besteht darin, CSS zu verwenden, um span in ein Box-Element umzuwandeln.

Es gibt zwei Möglichkeiten, ein Inline-Element als Box-Element zu definieren:

1. Verwenden Sie das Anzeigeattribut „display“ direkt, um es als Boxelement zu definieren.

Code kopieren

Der Code lautet wie folgt:

Anzeige:Block;

2. Verwenden Sie das Float-Attribut, um es automatisch als Box-Element zu definieren.

Code kopieren

Der Code lautet wie folgt:

schweben: links;

Details zum JavaScript-Prototyp

Artikel

Lösung zur Definition der Mindestspannweite hat keine Auswirkung

js-Objekt, um einen Daten-Paging-Effekt zu erzielen

Analyse eines MySQL-Deadlock-Szenariobeispiels

So konfigurieren Sie die OpenWRT-Entwicklungsumgebung auf Ubuntu 18.04 (physische Maschine)

Details zum JavaScript-Prototyp

Untersuchung der Eingabetastenfunktion vom Typ „Datei“

Allgemeine Benennungsregeln für CSS-Klassen und IDs

Schreiben Sie einen formellen Blog mit XHTML CSS

Einige wunderbare Verwendungsmöglichkeiten von URL-Objekten in JavaScript

MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial

Lösung zum Vergessen des MySQL-Root-Passworts in MACOS

Artikel empfehlen

JavaScript-Kreisdiagrammbeispiel

Lösung für den Netzwerkfehler beim Installieren der Workstation in einer virtuellen Maschine in ESXI

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

CSS implementiert fünf gängige 2D-Transformationen

Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3

Detailliertes Tutorial zur Konfiguration von Nginx für https-verschlüsselten Zugriff

Mit CSS3 erstellter Hover-Zoom-Effekt

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)

So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx

Schritte zum Kauf eines Cloud-Servers und zur Installation des Pagoda Panels in der Alibaba Cloud

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

Detaillierte Erklärung der CocosCreator-Optimierung DrawCall

Beispielcode zur Verwendung der Elementkalenderkomponente in Vue