Ich habe das folgende Markup:
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<span>Text, text and more text</span>
</li>
Ich möchte, dass der Text, wenn er umbrochen wird, nicht in die 'Spalte' für das Bild gelangt. Ich weiß, ich kann es mit einem machentable
(was ich gemacht habe), aber das ist aus diesem Grund nicht praktikabel .
Ich habe folgendes ohne Erfolg versucht:
li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}
Ich habe es auch versucht float: right
.
Vielen Dank.
EDIT: Ich möchte, dass es so aussieht:
IMG Text starts here and keeps going... and
wrap starts here.
So nicht:
IMG Text starts here and keeps going... and
wrap starts in the space left for the image.
white-space: nowrap;
inli span {...}
, aber ich den Eindruck, dass Sie etwas versuchen , anderes zu tunAntworten:
Das
span
Element ist ein Inline-Element. Sie können seine Breite in CSS nicht ändern.Sie können Ihrem Bereich das folgende CSS hinzufügen, damit Sie dessen Breite ändern können.
Eine andere Möglichkeit, die normalerweise sinnvoller ist, besteht darin, ein
<p>
Element als übergeordnetes Element für Ihr Element zu verwenden<span>
.Da
<p>
ist einblock
Element handelt, können Sie seine Breite mithilfe von CSS festlegen, ohne etwas ändern zu müssen.In beiden Fällen müssen Sie, da Sie jetzt ein Blockelement haben, das Bild schweben lassen, damit Ihr Text nicht vollständig unter Ihr Bild fällt.
PS statt
float:left
auf das Bild, können Sie auch setzenfloat:right
aufli p
in diesem Fall aber, müssen Sie auchtext-align:left
den Text neu auszurichten korrekt.PSS Wenn Sie die erste Lösung gewählt haben, kein
<p>
Element hinzuzufügen , sollte Ihr CSS folgendermaßen aussehen:quelle
span
in einp
Element geändert . Dann schienen nur diese beiden den Trick zu tun :li p {margin-left: 40px} .fav_star {float: left}
. Die Breite für das Bild wird durch das Bild selbst festgelegt, dasp
Element ist automatisch ablock
und ich habe die Breite in Ruhe gelassen. Danke dafür.display:block
Sie auch ein verwenden,div
da dies der Zweck ist (oder verwenden Sie ein,p
wie Sie auch vorschlagen). Sie müssen den Text nicht doppelt umbrechen - wenn Sie einen verwendenp
, können Sie den Text verlierenspan
.div
in diesem Fall kein a verwenden ,p
das sinnvoller ist. Das zu verlierenspan
ist für mich ein bisschen trivial und hängt davon ab, wie Sie Ihre Inhalte gestalten.<span>
in ein zu<p>
wickeln ist Hexerei direkt aus Hogwartz! Funktioniert wunderbar!Sehr einfache Antwort auf dieses Problem, das viele Leute zu fangen scheint:
Siehe Beispiel: http://jsfiddle.net/vandigroup/upKGe/132/
quelle
span
(der Fall des OP). Eindisplay: block
würde für die benötigt werdenspan
. Aber wenn ich das speichere, stimme ich zu, dass es eine viel elegantere Lösung ist. Falls sich jemand fragt, was die Magie dahinter stecktoverflow: hidden
, siehe meine Antwort unten.Für diejenigen, die Hintergrundinformationen wünschen, ist hier ein kurzer Artikel, der erklärt, warum dies
overflow: hidden
funktioniert. Es hat mit dem sogenannten Blockformatierungskontext zu tun . Dies ist Teil der W3C-Spezifikation (dh kein Hack) und im Grunde genommen die Region, die von einem Element mit einem blockartigen Fluss belegt wird.Erstellt bei jeder Anwendung
overflow: hidden
einen neuen Blockformatierungskontext. Es ist jedoch nicht die einzige Eigenschaft, die dieses Verhalten auslösen kann. Zitat einer Präsentation von Fiona Chan von der Sydney Web Apps Group:quelle
Wenn Sie möchten, dass das Element
margin-left
bearbeitetspan
wird, müssen Sie es erstellendisplay: inline-block
oderdisplay:block
auch.quelle
vertical-align: top;
das Bild damit.Die Einstellung
display:flex
für den Text hat bei mir funktioniert.quelle
overflow:auto
. Ich bin sicher, dass es nicht in allen Situationen genau gleich funktioniert, aber es hat auch bei mir funktioniert.Wickeln Sie ein Div um das Bild und die Spanne und fügen Sie Folgendes wie folgt zu CSS hinzu:
HTML
CSS
WENIGER
quelle