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

只需删除direction:rtl; 从您的CSS代码开始，它将正常工作。

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

CSS代码：

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

Answer 3

不确定，为什么在这里需要指导。 删除它时效果很好。

这是小提琴工作正常。

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

  [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>