2010-12-23 5 views
14

wrap Ich möchte zwei spans in einer Zeile mit CSS umhüllen.Wie zwei Spannen in eine Zeile mit CSS

Hier ist mein Code:

<div style="width:60px;"> 
    <span id="span1" style="float:left; display:inline;"></span> 
    <span id="span2" style="float:left; display:inline; "></span> 
</div> 

Aber es funktioniert nicht.

Wie geht das?

Edit:

Ich möchte die "id" verwenden, verwenden Sie entweder div oder span, ich möchte nur sie in einer Linie sein.

Wenn ich einfach span ohne Stil verwenden, sind die Inhalte nicht in der gleichen Zeile. Die zweite Zeile wird sinken.

+1

Sie sind in einer Zeile. Was genau erwartest du? –

+4

Spannen sind sowieso "Inline" -Elemente, mit denen man gar nichts anfangen sollte. –

+0

Können Sie das Problem anders beschreiben? Ich verstehe das, weil Sie die Spannen ohne Unterbrechung auf die gleiche Linie setzen wollen, was mit diesem Code gut funktioniert. Ist es das, was du versuchst? –

Antwort

26
<div style="float:left;"> 
<span style="display:inline;"></span> 
<span style="display:inline; "></span> 
</div> 
+0

Bitte besuchen Sie diesen Link http://www.jsfiddle.net/LurGq/7/ –

+0

Es funktioniert perfekt. Vielen Dank!!! –

+0

Ich habe Ihren Link gesehen. Gute Ressource. Vielen Dank. –

0

Es ist der Float links, der es auf separaten Zeilen verursacht. Vielleicht versuchen Sie einen &nbsp; (nicht brechenden Platz) zwischen den Spannen.

0

Überlauf vielleicht?

<div style="width:60px; overflow:hidden;">

+0

@OP wurde 'float: left' auf die Spannweite eingestellt. um es in einer Zeile zu machen, setzen Sie den Überlauf in den div. – haha

0

Die float und display Arten sich gegenseitig aus, so gibt es keinen Grund, sie zusammen verwenden. Auch <span> ist standardmäßig auf display:inline; so das ist sowieso redundant (es sei denn, Sie haben einen anderen Stil woanders setzen sie auf etwas anderes?).

3

Der Schwimmer wird Dinge durcheinander bringen. In der Regel mit einem Schwimmer zur Arbeit brauchen Sie auch eine Breite. Es kann sie nicht gegeneinander schweben, weil es nicht weiß, wie viel Platz jede Spanne in Bezug auf das div einnehmen wird. Spans sind inhärent Inline-Elemente, es sei denn, Sie definieren sie anders, daher sollten sie nur auf diese Weise ohne Float angezeigt werden.