html - 在 overflow hidden 的div内水平对齐div

Question

假设我有这个 HTML:

<style>
.b{
float:left; width: 300px; height: 300px;
}
</style>

<div style="overflow:hidden;width:300px;height:300px;" id="a">
    <div class="b" style="background-color: red"></div>
    <div class="b" style="background-color: green"></div>
    <div class="b" style="background-color: blue"></div>
</div>

我希望 .b div 位于一行。然而，他们只在 #a 的溢出正常时才这样做。

Answer 1

将 white-space: nowrap; 添加到 #a 并从 .b 中删除 float:left

带滚动条

#a{overflow:auto;width:300px;height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}​

DEMO

---

无滚动条

#a{height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}​

DEMO 2