Question

如何通过滚动

使下面的div显示在下面的html中

  <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和内联元素渲染，它们之间有空格，

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

Answer 2

您必须在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*/
}

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

2 个答案: