CSS代码删除不必要的空格

Question

当默认情况下从右侧到左侧保持水平滚动时，我注意到左侧有一个要删除的空白区域。问题是从右向左滚动时无法删除左侧显示的空白区域。任何建议都会有所帮助。

演示链接 ： http://jsfiddle.net/3xa69njt/

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Adult', 'Child','Infant', 'Senior'],
['2004',  11,      14, 2, 9],
['2005',  12,      14, 2, 9],
['2004',  13,      14, 2, 9],
['2005',  14,      14, 2, 9],
['2004',  15,      14, 2, 9],
['2005',  11,      14, 2, 9],
['2004',  12,      14, 2, 9],
['2005',  13,      14, 2, 9],
['2004',  14,      14, 2, 9],
['2005',  15,      14, 2, 9],
['2004',  11,      14, 2, 9],
['2005',  12,      14, 2, 9],
['2004',  13,      14, 2, 9],
['2005',  14,      14, 2, 9],
['2004',  15,      14, 2, 9],
['2005',  11,      14, 2, 9],
['2004',  12,      14, 2, 9],
['2005',  13,      14, 2, 9],
['2004',  14,      14, 2, 9],
['2005',  15,      14, 2, 9],
['2004',  11,      14, 2, 9],
['2005',  12,      14, 2, 9],
['2004',  13,      14, 2, 9],
['2005',  14,      14, 2, 9]


]);
var options = {            
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
width: data.getNumberOfRows() * 130,
bar: {groupWidth: 90},
chartArea: {left:60, width:'94%'} 
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

#chart_div {
overflow-x: auto; 
overflow-y: hidden;     
direction:rtl;
height:500px;

}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

尝试使用margin-left : 0px;left:0px;但没有运气。

--编辑-- 如前所述，我希望滚动条从右向左滚动，这就是使用direction:rtl的原因。

Answer 1

使用display:inline-block;它将删除空格

像下面一样

#chart_div {
overflow-x: auto; 
overflow-y: hidden;     
direction:rtl;
height:500px;
display:inline-block;       
}

工作小提琴

Answer 2

只需从CSS代码中删除direction:rtl;即可正常工作。

这是工作 JSFIDDLE http://jsfiddle.net/rhulkashyap/kjwhnx1q/3/

CSS代码：

#chart_div {
overflow-x: auto;
overflow-y: hidden;
height: 500px;
}

Answer 3

我不确定，为什么你在这里需要方向。删除它时它工作正常。

这是小提琴工作正常。

查看此参考以了解有关方向属性的更多信息。

[1]: http://jsfiddle.net/3xa69njt/2/

Answer 4

<style>
#chart_div {
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
height: 500px;
display: inline-block;
margin-left: -20px;
}
</style>