为什么HTML代码会被包围

Question

我在设计一个组织结构图。我的问题是，它包装在页面的末尾，而不是水平滚动。

​

div {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  float: left;
  border: solid 1px #f1f1f1;
  border-top: solid 1px #ccc;
  border-tottom: none;
  color: #ccc;
  margin: 8px;
}

span {
  padding: 10px;
  min-height: 30px;
  background: #3f47f2;
  color: orange;
}

p {
  clear=both;
}

<div>
  |<br />
  <span>Cap</span>
  <p>&nbsp;</p>
  <div>
    |<br />
    <span>CT-1</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-1-A</span>
    </div>
    <div>
      |<br />
      <span>CT-1-B</span>
    </div>
  </div>

  <div>
    |<br />
    <span>CT-2</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-2-A</span>
    </div>
    <div>
      |<br />
      <span>CT-2-B</span>
    </div>
    <div>
      |<br />
      <span>CT-2-C</span>
    </div>
  </div>

  <div>
    |<br />
    <span>CT-3</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-3-A</span>
    </div>

  </div>
</div>

​

如果您运行代码段，它将显示我不想要的内容。

我想要的是，按照这个粗略的例子，它是3行的：

                                CAP
        CT1                      CT2                     CT3
 CT1-A         CT1-B         CT2-A  CT2-B  CT2-C            CT3-A

我不知道怎么做到这一点。我也不知道它为什么不这么做。即使我试图给它1000%的宽度，它仍然包装！

Answer 1

将white-space: nowrap; display: inline-block;添加到div

删除声明的float规则和无效(错误)规则“边框-总数:无；

​

div {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  border: solid 1px #f1f1f1;
  border-top: solid 1px #ccc;
  color: #ccc;
  margin: 8px;    
  white-space: nowrap;
  display: inline-block;
}

span {
  padding: 10px;
  min-height: 30px;
  background: #3f47f2;
  color: orange;
}

p {
  clear=both;
}

<div>
  |<br />
  <span>Cap</span>
  <p>&nbsp;</p>
  <div>
    |<br />
    <span>CT-1</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-1-A</span>
    </div>
    <div>
      |<br />
      <span>CT-1-B</span>
    </div>
  </div>

  <div>
    |<br />
    <span>CT-2</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-2-A</span>
    </div>
    <div>
      |<br />
      <span>CT-2-B</span>
    </div>
    <div>
      |<br />
      <span>CT-2-C</span>
    </div>
  </div>

  <div>
    |<br />
    <span>CT-3</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-3-A</span>
    </div>

  </div>
</div>

​

Answer 2

必须将min-width添加到容器div中。

所以这里是min-width:1024px;overflow:auto;

https://jsfiddle.net/t4vmy2vj/1/