元素包装在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>设置特定的大小，它只是从它的父级继承它。