css代码删除不必要的空白空间

默认情况下，从右侧到左侧保持水平滚动时，我注意到要删除左侧的空白区域。从右侧向左侧滚动时，问题无法清除左侧显示的空白区域。任何的意见都将会有帮助。css代码删除不必要的空白空间

 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的原因。

来源

2017-08-28 user8440557

你真的需要'方向：rtl'？ –

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

像下面

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

Working fiddle

来源

2017-08-28 04:54:52

要么我不明白这个问题，要么你的解决方案不起作用？也许你可以添加'overflow：hidden'，然后按预期工作。 –

当图表加载水平滚动向右移动时，看到Op的小提琴，因为左侧有不需要的空间。。所以我建议一个答案，删除它看到这两个小提琴你会得到它，我希望所以@PatrickMlr –

只是尝试你的代码与浏览器它会工作。不知道为什么它不与js fiddel ..可能是一些问题。 – Nirmal

从你的CSS代码只是删除direction:rtl;，它会正常工作。

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

CSS代码：

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

来源

2017-08-28 05:02:43

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

这里是fiddle工作正常。

查询此reference了解更多关于方向属性。

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

来源

2017-08-28 05:03:26

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

来源

2017-08-28 05:09:03

如上所述，我希望滚动条从右向左滚动，这就是使用'direction：rtl'的原因。以上建议的答案都不起作用，但当从右侧向左侧移动滚动条时，仍然可以看到左侧的空白区域。 – user8440557

css代码删除不必要的空白空间

回答

相关问题