如何限制DIV在同一行

Question

我有三个DIV:

<div style="float:left;" id="a"> a </div>
<div style="float:left;" id="b"> b </div>
<div style="float:left;" id="c"> c </div>

我希望所有DIV都在同一行,但在某些浏览器中,由于DIV中的内容大小,最后DIV会降低.

如何将它们限制在同一行,即使它们在DIV中更具内容.在这种情况下,水平滚动条将用于查看所有内容.

谢谢

Answer 1

你需要将div包装在父div中并在其上设置' white-space:nowrap '.另外,为div 设置' display:inline-block '以获得所需的效果.

尝试这样的事情,

.parent {
  white-space: nowrap;       
}

.child {
  width: 200px;
  height: 200px;
  display:inline-block;       
}

<div class="parent">
  <div  class="child" id="a"> a </div>
  <div  class="child" id="b"> b </div>
  <div  class="child" id="c"> c </div>
</div>