CSS-Breite eines <span> -Tags

81

Ich verwende <span>Tags in meinen Modultiteln, z

<span>Categories</span>.

Ich gebe die Hintergrundfarbe / das Hintergrundbild, die Breite und Höhe des Bereichs in CSS an.

Die Breite des Bereichs hängt jedoch von seinem Inhalt / Text ab.

Wenn ich also <span></span>nur ein Hintergrundbild / eine Hintergrundfarbe in CSS habe, wird nichts angezeigt.

Natürlich möchte ich, dass etwas erscheint.

Wie kann ich das beheben?

css mars-o
quelle
4
Ich möchte nur darauf hinweisen, dass dies keine sehr gute Verwendung der Spanne ist. Es soll kurze Inhaltsbereiche innerhalb eines größeren Ganzen markieren, daher ist es absichtlich standardmäßig kein Blockelement. Für Titel ist eines der h # -Tags am besten geeignet. Andernfalls ist ein Div normalerweise immer noch besser als eine Spanne.
Chuck
danke für deine antworten ..: D ich finde das zunächst ein albernes q'n.lol..so schon vor vielen jahren. =))
Mars-o

Antworten:

114

Sie können die display-Eigenschaft explizit auf "block" setzen, damit sie sich wie ein Element auf Blockebene verhält. In diesem Fall sollten Sie jedoch wahrscheinlich nur ein div verwenden.

<span style="display:block; background-color:red; width:100px;"></span>
Chris Fulstow
quelle
Danke, ich verstehe. Das passiert, weil die Spanne inline ist. Ich sehe jetzt den Unterschied Wette. Inline- und Blockanzeigen. Ja, Div ist angemessen.:D..Danke
Mars-o
4
Die Verwendung eines DIV in Absätzen, Überschriften (h1, h2 usw.) würde die Validierung unterbrechen, wenn Sie sich dafür interessieren. Eine andere mögliche Lösung ist die Verwendung einer Spanne, Anzeige: Block; und schweben: links; :)
Arve Systad
danke, und die Antwort unten war entscheidend, um die Breite zum Laufen zu bringen
Timothy T.
3
es ist besser zu verwenden, inline-blockanstattblock
Eugen Konkov
125

Überspannt standardmäßig den Inline-Stil, dessen Breite Sie nicht angeben können.

display: inline-block;

wäre ein guter Weg, außer IE unterstützt es nicht

Sie können jedoch eine Lösung mit mehreren Browsern hacken

Cobbal
quelle
2
Ich glaube, dass IE Inline-Block seit mindestens Version 6 unterstützt. Ich denke, es unterstützt Inline-Block nur, wenn das Element, auf das es angewendet wird, natürlich Inline ist (was <span> ist).
Ken Browning
3
Ja, IE unterstützt Inline-Block. Seine Unterstützung ist subtil anders, aber es würde in diesem Fall funktionieren.
Thomasrutter
Genial! Beginnen, die wirklichen Unterschiede in der Anzeige zu verstehen:
Dean Meehan
6

Sie können die Breite eines Elements mit Inline-Anzeige nicht angeben. Sie können etwas wie ein nicht unterbrechendes Leerzeichen () einfügen und dann die Polsterung so einstellen, dass es etwas breiter wird, aber Sie können es nicht direkt steuern.

Sie könnten den Inline-Block für die Anzeige verwenden, dies wird jedoch nicht allgemein unterstützt.

Ein echter Hack wäre es, ein Bild hinein zu legen und dann die Breite festzulegen. So etwas wie ein transparentes 1-Pixel-GIF. Nicht der empfohlene Ansatz.

Cletus
quelle
3

Ich würde das paddingAttribut verwenden. Auf diese Weise können Sie zu beiden Seiten des Elements eine festgelegte Anzahl von Pixeln hinzufügen, ohne dass das Element seine Spannweite verliert:

  • Es wird kein Block
  • Es wird schweben, wie Sie es erwarten

Diese Methode wird jedoch nur zum Auffüllen hinzugefügt. Wenn Sie also die Länge des Inhalts ändern (z. B. von Kategorien zu Tags), ändert sich die Größe des Inhalts und auch die Gesamtgröße des Elements. Wenn Sie jedoch wirklich eine starre Größe festlegen möchten, sollten Sie die oben genannten Schritte ausführen und ein div verwenden.

Sehen Sie sich das Box - Modell für mehr Details über das Box - Modell, Inhalt, Polsterung, Marge usw.

Kelly Hays
quelle
3

Beginnen Sie Ihre Span-Attribute wie in anderen Antworten wie folgt:

display:inline-block;

Jetzt können Sie mehr Polsterung als Breite verwenden:

padding-left:6%;
padding-right:6%;

Wenn Sie Polster verwenden, wird Ihre Farbe nach beiden Seiten (rechts und links) und nicht nur nach rechts (wie in der Breite) erweitert.

Nohy bez hranic
quelle
2

Verwenden Sie das Attribut 'display' wie im Beispiel:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Antonio
quelle
1

Nachdem Sie die Höhe und Breite festgelegt haben, sagen Sie, wie Sie sich verhalten sollen, wenn der darin enthaltene Text über den Bereich hinausgeht. Fügen Sie also das CSS hinzu

Überlauf: auto;

user2130923
quelle