CSS样式 - DIV - 如何防止div元素跳到下一行？

Question

对于我下面的两个div元素，我如何阻止div元素跳到下一行？

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

这导致：

One
Two

问题：如何将其排成一行，如下所示：

OneTwo

Answer 1

将第二个div更改为span：

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

有两个原因：

• 它不会添加任何额外的CSS
• 在span内部包含div（而不是两个div被黑客攻击，更加“语义”）

希望这有帮助！

以下链接说明：http://jsfiddle.net/4HxhV/

Answer 2

简单......

   .two {
       display:inline-block;
    }

我的小提琴http://jsfiddle.net/blackhawx/LfN9C/6/

Answer 3

最大的问题是你需要包装它们以便正确显示它们。我会移动。两个一个。然后将.one和.two放在.wrapper中，以便它可以包含它们。然后在.wrapper div上放置display：inline-block。看看我的例子。 HTML

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

CSS

.wrapper div{
  display: inline-block;
}