元素包裝在div而不是滾動

Question

我想在html中爲DataGridView創建一些類似物。我將從數據庫中提取數據並插入到DGV中。我有一個有限的空間來處理這個DGV，所以我想讓它在x軸上滾動。我嘗試過使用表格和div。當我嘗試使用標籤或h4時，標籤會自動換行而不是沿x軸滾動。

<div id="dgv"> 
    <div><h4>Header1</h4><h4>Header2</h4><h4>Header3</h4><h4>Header4</h4><h4>Header5</h4> 
</div> 

CSS: 
#dgv 
{ 
    overflow: scroll; 
    white-space: nowrap; 
    width: 500px; 
    height: 200px; 
} 

#dgv h4 
{ 
    display: inline; 
    margin: 0px; 
    width: 150px; 
    float: left; 
    border-right: 1px solid black; 
} 

Answer 1

你需要給<div>內<div id="dgv">的寬度比其父更大。嘗試添加此CSS：

#dgv div { 
    width: 1000px; 
} 

這應該會給你水平滾動。同樣，如果你想垂直滾動，它需要的高度也高於容器的高度。

將<div id="dgv">想象成一個窗口，將其內部的<div>視爲您正在通過該窗口查看的畫布。如果畫布大於窗口，則會發生滾動。如果沒有爲內部<div>設置特定的大小，它只是從它的父級繼承它。