web-dev-qa-db-ja.com

CSSで2つのスパンを1行にラップする方法

CSSで1行に2つのspansをラップしたい。

ここに私のコードがあります：

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

しかし、それは機能しません。

どうやってするか？

編集：

divまたはspanのいずれかを使用して、「id」を使用します。1行にするだけです。

スタイルなしでspanを使用するだけでは、コンテンツは同じ行にありません。 2番目の行が下がります。

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

フロートは物事を台無しにします。通常、フロートが機能するためには、幅も必要です。 divとの関係で各スパンが占めるスペースがわからないため、それらを互いに浮かせることができません。特に定義しない限り、スパンは本質的にインライン要素なので、フロートなしでそのまま表示する必要があります。

5
jbwharris

別の行にあるのは、フロートの左です。たぶん&nbsp;（非分割スペース）スパン間。

0
Samuel

多分オーバーフロー？

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

0
haha

floatスタイルとdisplayスタイルは相互に排他的であるため、これらを一緒に使用しても意味がありません。また、<span>デフォルトはdisplay:inline;そのため、とにかく冗長です（他に他のスタイルを設定していない限り）。

0
Spudley