web-dev-qa-db-fra.com

Comment envelopper deux travées en une seule ligne avec CSS

Je veux envelopper deux spans en une seule ligne avec CSS.

Voici mon code:

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

Mais ça ne marche pas.

Comment faire ça?

Modifier:

Je veux utiliser le "id", soit utiliser div ou span, je veux juste qu'ils soient sur une seule ligne.

Lorsque j'utilise simplement span sans style, le contenu n'est pas sur la même ligne. La deuxième ligne descendra.

csslinehtml
21
Jiangong SUN
<div style="float:left;">
<span style="display:inline;"></span>
<span style="display:inline; "></span>
</div>
35
Pradeep Singh

Le flotteur gâchera les choses. Habituellement, avec un flotteur pour travailler, vous avez également besoin d'une largeur. Il ne peut pas les faire flotter l'un contre l'autre car il ne sait pas combien d'espace chaque travée occupera par rapport à la div. Les étendues sont intrinsèquement des éléments en ligne, sauf si vous les définissez autrement, elles doivent donc simplement s'afficher de cette façon sans le flottant.

5
jbwharris

C'est le flotteur gauche qui le fait être sur des lignes distinctes. Essayez peut-être un &nbsp; (espace insécable) entre les travées.

0
Samuel

Débordement peut-être?

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

0
haha

Les styles float et display s'excluent mutuellement, il est donc inutile de les utiliser ensemble. Aussi <span> par défaut à display:inline; donc c'est redondant de toute façon (sauf si vous avez un autre style ailleurs les définissant sur autre chose?).

0
Spudley