為什么不溢出：自動在 x 軸上工作？

Question

我試圖制作一個應該水平溢出其內容並水平顯示滾動條的容器（使用overlfow：auto），因為父容器的寬度小於其父容器子容器的寬度之和，但是，我解釋它垂直溢出，這就是為什么條看起來垂直滾動的原因。 我的問題是，如何獲得水平條及其在 x 軸上的相應偏移量？ （而不是在 y 中）。

這是我的 html 代碼的一部分：

 <div style = "width: 700px; height: 50px; overflow: auto;"> <div style = "width: 100%; height: 100%; background-color: #b01e1e;"> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example1</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example2</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example3</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example4</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example5</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example6</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example7</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example8</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example9</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example10</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example11</p></b></div> <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example12</p></b></div> </div> </div>

Answer 1

試試<div style:"Overflow:Scroll,display:block;">這對我有用。

Answer 2

試試這個。這對我有用

<div style = "width: 700px; height: 50px; overflowX: auto;">

Answer 3

答案是：不要使用float 。

使用 CSS 網格。 通過 ALOT 簡化一切。

 .grid { display: grid; grid-template-columns: repeat(12, 11.11%); overflow-x: auto; place-items: center; height: 50px; width: 700px; }

 <div class="grid"> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> </div>

Answer 4

擦除浮動（如果沒有足夠的空間，這些總是會中斷）並替換display: flex; 帶display: inline-flex; 允許它們內聯。 然后應用white-space: nowrap; 到那些 inline-flex 元素的父級以避免破壞：

 <div style="width: 700px; height: 50px; overflow: auto;"> <div style="width: 100%; height: 100%; background-color: #b01e1e; white-space: nowrap;"> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example1</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example2</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example3</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example4</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example5</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example6</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example7</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example8</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example9</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example10</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example11</p></b></div> <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example12</p></b></div> </div> </div>

順便說一句：使用外部 CSS 使事情變得更容易處理和更緊湊。 這是與上面相同的代碼以這種方式減少：

 .a { width: 700px; height: 50px; overflow: auto; }.b { width: 100%; height: 100%; background-color: #b01e1e; white-space: nowrap; }.b > div { width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle; }

 <div class="a"> <div class="b"> <div><b><p>Example1</p></b></div> <div><b><p>Example2</p></b></div> <div><b><p>Example3</p></b></div> <div><b><p>Example4</p></b></div> <div><b><p>Example5</p></b></div> <div><b><p>Example6</p></b></div> <div><b><p>Example7</p></b></div> <div><b><p>Example8</p></b></div> <div><b><p>Example9</p></b></div> <div><b><p>Example10</p></b></div> <div><b><p>Example11</p></b></div> <div><b><p>Example12</p></b></div> </div> </div>