为什么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规则宣布和无效（拼写错误）规则＆＃34; border-tottom：none;＆＃34;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

Answer 3

您需要添加更多类并使用列系统，如下所示：

div {
  text-align: center;
  float: left;
  border: solid 1px #f1f1f1;
  border-top: solid 1px #ccc;
  border-tottom: none;
  color: #ccc;
  margin: 8px;
}
.col {
display:inline-block;
width:30%;
}

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

p {
  clear=both;
}

<div>
  |<br />
  <span>Cap</span>
  <p>&nbsp;</p>
  <div class="col">
    |<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 class="col">
    |<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 class="col">
    |<br />
    <span>CT-3</span>
    <p>&nbsp;</p>
    <div>
      |<br />
      <span>CT-3-A</span>
    </div>

  </div>
</div>