css - CSS スタイリング - DIV - div 要素が次の行にスキップするのを防ぐ方法は?

Question

以下の 2 つの div 要素の場合、div 要素が次の行にスキップしないようにするにはどうすればよいですか?

<div class = "one">
  One
  <div class = "two">
    Two
  </div>
</div>

これにより、次の結果が得られます。

One
Two

質問: 次のように 1 行で表示するにはどうすればよいですか。

OneTwo

Answer 1

秒divを a に変更しspanます。

  <span class = "two">
    Two
  </span>

2 つの理由:

• 余分なCSSを追加しません
• (2 つの s が互いに適合するようにハッキングされるよりも)span内に含まれている方がより「セマンティック」です。divdiv

お役に立てれば！

説明するリンクは次のとおりです。http://jsfiddle.net/4HxhV/

Answer 2

単純...

   .two {
       display:inline-block;
    }

そして私のフィドルhttp://jsfiddle.net/blackhawx/LfN9C/6/

Answer 3

大きな問題は、これらを正しく表示できるようにラップする必要があることです。私は .two out of one を移動します。次に、クラス .one と .two を .wrapper 内に配置して、それらを含めることができるようにします。次に、display: inline-block を .wrapper div に配置します。私の例を見てください。HTML

<div class="wrapper">
   <div class = "one">
    One
   </div>
   <div class = "two">
    Two
   </div>
 </div>

CSS

.wrapper div{
  display: inline-block;
}