如何使div在下面的代码中显示为内联?

时间:2014-07-26 12:07:22

标签: css css3 css-float

如何通过滚动

使下面的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;
    }

2 个答案:

答案 0 :(得分:1)

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

<强> DEMO

Inline-block和内联元素渲染,它们之间有空格,

  

white-space CSS属性用于描述空白的方式   处理元素内部。

     

nowrap:正常情况下折叠空白,但会抑制换行符   (文本包装)在文本中。

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;
}

答案 1 :(得分:1)

您必须在width上指定child element。没有指定宽度,它将包含水平块。检查 DEMO

因此,请在班级.childDiv.inner中定义宽度。

.childDiv 
{
float: left;
width : 50%; /*required to specify the width*/
background:red; /*just for visibility used here*/
padding:3px;
}
.inner {
float : left;
width : 50%; /*required to specify the width*/
}