代码之家 › 专栏 › 技术社区 › MyDaftQuestions

为什么HTML代码会自动换行

css html

MyDaftQuestions · 技术社区 · 9 年前

我正试图设计一个组织结构图。我的问题是它在页面的末尾换行,而不是在水平方向上滚动。

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%的宽度,它仍然包裹!

2 回复 | 直到 9 年前

UncaughtTypeError 9 年前

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