Hallo,
ich habe ein Problem mit einem Inline <div> Element, dessen Breite ich gerne festlegen möchte. Das Element soll im Text erscheinen, einen linear-gradient und einen Rahmen haben - es handelt sich in dem Falle um einen Prozentbalken.
Da ich das ganze für ein Forum-System mache, habe ich auf den darumliegenden Text keinen Einfluss. Das Element muss einfach in einen bestehenden Text eingebettet werden, ohne diesen zu verändern.
Das Problem ist, das wenn ich ein <div> Element "display" CSS Attribut einfüge, bricht der Text an der Stelle um. Wenn ich statt dessen ihm ein "display: inline" mitgebe, dann ignoriert der Browser (also zumindest Firefox, ich habe gelesen, dass das Verhalten anderer Browser da anders sein soll, aber noch nicht ausprobiert) die Angabe zur Breite und stellt ihn so schmal wie möglich dar, was bei einem Prozentbalken eine Katastrophe ist.
Wenn ich dagegen einen <span> verwende, dann wird der Text in dem Balken fortgesetzt und die Elemente überlappen sich.
Beispiel:
Ebenfalls problematische Alternativen:
<span style=\"display: table-cell; display: inline-block; vertical-align: top;
Das ganze soll als eine einzige Zeile dargestellt werden.
ich habe ein Problem mit einem Inline <div> Element, dessen Breite ich gerne festlegen möchte. Das Element soll im Text erscheinen, einen linear-gradient und einen Rahmen haben - es handelt sich in dem Falle um einen Prozentbalken.
Da ich das ganze für ein Forum-System mache, habe ich auf den darumliegenden Text keinen Einfluss. Das Element muss einfach in einen bestehenden Text eingebettet werden, ohne diesen zu verändern.
Das Problem ist, das wenn ich ein <div> Element "display" CSS Attribut einfüge, bricht der Text an der Stelle um. Wenn ich statt dessen ihm ein "display: inline" mitgebe, dann ignoriert der Browser (also zumindest Firefox, ich habe gelesen, dass das Verhalten anderer Browser da anders sein soll, aber noch nicht ausprobiert) die Angabe zur Breite und stellt ihn so schmal wie möglich dar, was bei einem Prozentbalken eine Katastrophe ist.
Wenn ich dagegen einen <span> verwende, dann wird der Text in dem Balken fortgesetzt und die Elemente überlappen sich.
Beispiel:
HTML:
Hit Points: <div style="border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #200000 88%, black 88%, black 88.5%, transparent 88.5%, transparent 100%)"> </div> 7 / 8 ... noch mehr Text in derselben Zeile
Ebenfalls problematische Alternativen:
HTML:
Hit Points: <div style="display: inline; border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #200000 88%, black 88%, black 88.5%, transparent 88.5%, transparent 100%)"> </div> 7 / 8
<span style=\"display: table-cell; display: inline-block; vertical-align: top;
HTML:
Hit Points: <span style=\"display: table-cell; display: inline-block; vertical-align: top; border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #200000 88%, black 88%, black 88.5%, transparent 88.5%, transparent 100%)"> </span> 7 / 8