html - 具有动态内容的内部 div 的 CSS 宽度规则

Question

我有两个 div，一个外层 div 和一个内层 div。我已使用 overflow-x: scroll 将外部 div 设置为固定宽度 (505px)。

我的内部 div 包含向左浮动的动态内容(意味着可以有一个 div 或 100 个)，因此宽度可以在 50px 到 5000px 之间的任何位置。我正在尝试设计内部 div 的样式，以便它可以在一行中容纳所有动态内容，但它的行为不是那样的；它达到 505px 并向下移动到下一行。如果我给它一个 5000px 的宽度，显然它可以工作，但内容可能比这少得多。我做错了什么？

#outer-div {
    width: 505px;
    height: 100%;
    float: left;
    background-color: #fff;
    overflow-x: scroll;
    overflow-y: hidden;
}

#inner-div {
    width: auto;
    display: inline;
}

.dynamic-content {
    width: 62px;
    height: 100%;
    font-size: 13px;
    text-align: center;
    float: left;
}

<div id = "outer-div">
   <div id = "inner-div">
       <div class = "dynamic-content"></div>
       <div class = "dynamic-content"></div>
       <div class = "dynamic-content"></div>
       etc...
   </div>
</div>

Answer 1

这不是宽度设置..您需要使用 white-space:nowrap

停止换行符

#outer-div {
  width: 505px;
  height: 100%;
  float: left;
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid grey;
  white-space: nowrap;
}
.dynamic-content {
  height: 100%;
  font-size: 13px;
  text-align: center;
  display: inline-block;
}

<div id="outer-div">

  <div class="dynamic-content">AAAAAAAAAAAAA</div>
  <div class="dynamic-content">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
  <div class="dynamic-content">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  etc...
</div>