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

Question

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

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

这导致：

One
Two

问题：如何让它排成一行，如下所示：

OneTwo

Answer 1

将第二个更改div为 a span：

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

两个原因：

• 它没有添加任何额外的 CSS
• span将 a包含在a 内部会更“语义化” div（而不是两个divs 被破解以适应彼此）

希望这可以帮助！

这是一个说明的链接：http: //jsfiddle.net/4HxhV/

Answer 2

简单的...

   .two {
       display:inline-block;
    }

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

Answer 3

最大的问题是您需要将它们包装起来，以便正确显示它们。我会把.two移出一个。然后将 .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;
}