0

真的很奇怪的一个。
我有一个包含使用 FlipClock.js 的计数器的 Div 元素
。它的右侧有某种边距,我无法在 CSS 中覆盖。
无论我如何处理元素(工具中的内联样式或 CSS 本身,我都无法摆脱它,它正在推动其他内容)。
您将需要 F12 并选择具有“fclock flip-clock-wrapper”类的 Div。
你会注意到它上面的突出显示它需要额外的空间,就好像它被分配了一个边距一样。这是插件和原始 CSS 所在的小提琴:
FIDDLE
HTML:

    <td>
      <div class="fclock"></div>
    </td>

CSS覆盖:

    .fclock {
transform-origin: 0 0;
transform: scale(.30);
-ms-transform: scale(.30);
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.30);
-o-transform-origin: 0 0;
-o-transform: scale(.30);
-moz-transform-origin: 0 0;
-moz-transform: scale(.30);
}

JS:

     var currentDate = new Date(); 
// Set some date in the future. ***change to desired date***

var futureDate = new Date(2016, 07, 30, 08, 0, 0); //fixed as per comments
// Calculate the difference in seconds between the future and current date 
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000; 

var clock = $('.fclock').FlipClock(diff, {
   clockFace: 'DailyCounter',
   countdown: true
});
4

1 回答 1

0

覆盖flipclock.css中的样式定义,.flip-clock-wrapper ul如下所示:

代码:

.flip-clock-wrapper ul.flip {
    position: relative;
    float: left;
    margin: 5px;
    width: auto;
    height: 80px;
    font-size: 22px;
    font-weight: bold;
    line-height: inherit;
    border-radius: 6px;
    background: #000;
    padding: 24px;
}

小提琴或它没有发生

PS:请注意我如何将 CSS 选择器更新为使用 CSS 特异性行为.flip-clock-wrapper ul.flip-clock-wrapper ul.list确保我的样式声明覆盖 CSS 文件中的样式声明。

于 2016-07-31T12:02:29.550 回答