html - 最初のものではなく、それ自体の下に 2 番目のスパン ラップを作成します

Question

こんにちは、私はこのコードを持っています

<div class="test">
    <span class="first-span">first span</span>
    <span class="second-span">some long long long long text</span>
</div>

CSSで

.test{
    width:150px;
    margin:10px
}
.first-span{
    border:1px solid red;
}
.second-span{
    border:1px solid blue
}​

JSFIDDLE リンク

フィドルでわかるように、2 番目のスパンの「長い」単語がラップされ、「最初の」単語の下に来ています。しかし、私が必要としているのは、「長い」という言葉は「いくつか」という言葉の下にあるということです

これはどういうわけか可能ですか？

Answer 1

これは、スパンまたはすべての「インライン」要素が機能する方法です。これに対抗するためにdisplay: block; float: left;、フロートを使用できます。左は、スパンが必要なだけのスペースしか占有しないようにします。

動作デモはこちら

Answer 2

How about using display as table?

.test {
  display: table;
}

.test span {
  display: table-cell;
  width: 100px;
  border: 1px solid #333;
}

.test .first-span {
  width: 100px;
}

<div class="test">
  <span class="first-span">first span</span>
  <span class="second-span">some long long long long text</span>
</div>

Answer 3

より良い方法がありますが、最初のスパンを左にフロートさせるだけでうまくいきます

.first-span{
    border:1px solid red;
    float:left;
    display:block;
}