css - 如何使 div 在以下代码中内嵌显示？

Question

如何使以下 div 以内联方式显示在以下带有滚动条的 html 中

@ http://jsfiddle.net/hj2E6/5/

  <div id="scrollable">
  <div class="childDiv">
      <div class="inner">I am the first div in first should appear inline with the rest of the text</div>
      <div class="inner">I am the second div in first should appear inline with the rest of the text</div>
  </div>
  <div class="childDiv">
      <div class="inner">I am the first div in Second should appear inline with the rest of the text</div>
      <div class="inner">I am the second div in Second should appear inlinewith the rest of the text </div>
  </div>

这是我写的 CSS

    #scrollable {
        width : 50%;
        height : 350px;
        background-color: #d0e4fe;
        overflow-x: scroll;
        overflow-y: hidden;

    }
    .childDiv {
        float: left;

    }
    .inner {
        float : left;
    }

Answer 1

您可以使用 display:inline-block; 和 white-space:nowrap; 使 div 显示为内联并保持在同一行:

DEMO

Inline-block和内联元素在它们之间呈现空白，

The white-space CSS property is used to to describe how whitespace inside the element is handled.

nowrap : Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

( source: MDN )

CSS:

#scrollable {
    width : 50%;
    height : 350px;
    background-color: #d0e4fe;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}
.childDiv {
    display:inline-block;
    white-space:nowrap;
}
.inner {
    display:inline-block;
}