可滾動容器內的全寬子元素

Question

我有一個具有固定寬度的div容器，並且一些子元素可能比父元素大。

是否可以讓所有子元素從父元素（ overflow: auto ）獲取可滾動區域的整個寬度？

 #container { width: 200px; background-color: grey; overflow:auto; margin:10px; } #container p{ display:block; background-color: green; white-space: nowrap; width: 100%; } 

 <div id="container"> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> 

這是小提琴 。 向右滾動時，您可以看到子元素background-color小於內容。

Answer 1

將內容包裝在div中，並將其設置為display: inline-block ：

 #container { width: 200px; background-color: grey; overflow: auto; margin: 10px; } #container>div { display: inline-block; } #container p { display: block; background-color: green; white-space: nowrap; } 

 <div id="container"> <div> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> </div> 

Answer 2

您可以設置要display:table-row;的子元素display:table-row;

 #container { width: 200px; background-color: grey; overflow: auto; } #container p { display: table-row; background-color: green; white-space: nowrap; } 

 <div id="container"> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> 

如果您需要額外的樣式控件，請添加額外的<div> 。

 #container { width: 200px; background-color: grey; overflow: auto; } #container div { display: table; border-spacing: 0 10px; } #container p { display: table-row; background-color: green; white-space: nowrap; } 

 <div id="container"> <div> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>A very very very very very long Sample Text</p> </div> </div> 

Answer 3

你可以使用絕對位置屬性來做到這一點。

 #container { width: 200px; background-color: grey; overflow:auto; margin:10px; } #container p{ display:block; background-color: green; white-space: nowrap; position:absolute; }