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代碼刪除不必要的空白空間

回答

相關問題