调整flipclock.js不调整预期

http://flipclockjs.com/调整flipclock.js不调整预期

我使用的是默认的钟面，所有我想要做的就是roughtly 1/3，但不管是什么原因，是不是调整调整如我所料

在flipclock CSS我改变以下

.flip-clock-wrapper ul { 
position: relative; 
float: left; 
margin: 5px; 
width: 20px; 
height: 30px; 
font-size: 27px; 
font-weight: bold; 
line-height: 29px; 
border-radius: 6px; 
background: #000; 
}

但每个UL的宽度是40像素;

如果任何人都可以点我这将是伟大正确的方向..

来源

2014-07-25 Barry Hamilton

我相信你的CSS由默认插件CSS覆盖..试图寻找如何使用选项'classes'，该文件中说， '（对象）这是CSS类用来附加到DOM对象的对象。 –

我正在编辑默认的CSS。检查时显示所应用的更改，但计算时不同 –

Flipclockjs是建立在许多固定属性。你必须调整更多。我与响应方法用一个例子来覆盖它们：

@media screen and (max-width: 819px) { 

    /*.home-featured .clock { margin: 0 auto; display: block; width: 322px; }*/ 
    .home-featured h1 { font-size: 1.6em; } 

    .flip-clock-wrapper ul { height: 50px; line-height: 50px; margin: 3px; } 
    .flip-clock-wrapper ul li a div.up:after { top: 24px; } 
    .flip-clock-divider { height: 50px; } 
    .flip-clock-dot { height: 6px; width: 6px; left: 7px;} 
    .flip-clock-dot.top { top: 17px; } 
    .flip-clock-dot.bottom { bottom: 8px; } 

    .flip-clock-divider .flip-clock-label { font-size: 16px; } 
    .flip-clock-divider.days .flip-clock-label { right: -76px; } 
    .flip-clock-divider.hours .flip-clock-label { right: -70px; } 
    .flip-clock-divider.minutes .flip-clock-label { right: -64px; } 
    .flip-clock-divider.seconds .flip-clock-label { right: -70px; } 

    .flip-clock-wrapper ul { width: 37px; } 
    .flip-clock-wrapper ul li a div div.inn { font-size: 38px; } 

    /* Korekcja położenia pól zegara załamanych do nowej linii */ 
    .flip-clock-wrapper ul { margin-bottom: 35px; } 
    .flip-clock-wrapper { margin-bottom: -35px; } 
} 

.flip-clock-divider.minutes { clear: none;} 

@media screen and (max-width: 550px) { 

    .flip-clock-divider.minutes { clear: left;} /* break clock at minutes */ 

}

来源

2014-10-30 22:18:28

-3

试试这个

.flip-clock-wrapper ul { 
 
    ... 
 
    width: 20px !important; 
 
    ... 
 
}

来源

2015-08-03 05:30:40 Gon

我离开即将到来的问卷

评论要解决大小问题FlipClock，只需添加以下css你的主时钟容器

.timer { 
    zoom: 0.5; 
    -moz-transform: scale(0.5); 
}

上面一行将减少1/2大小，如果你想要更小的尺寸可以使用0.3或任何

来源

2015-11-11 11:48:58

.flip-clock-wrapper ul { 
     width: 20px; 
     height: 25px; 
     line-height: 25px; 
     **padding-left: 20px;** //add this to your wrapper ul and youll be able to set the with you can set it to zero and just adujst your width 
    }

来源

2016-05-19 08:36:53 anuloo

它已有一段时间，因为这是积极的，但我我碰到了这个库，我决定试试看。事情现在一直在努力。这是从回购的closed issue（未解决）之一改编的解决方案。看起来，开发者承诺提供一个新的API，但这是一年多前的事情。

这并不完美，因为在设置$clock-flip-font-size: 120px时存在一些问题。另外，当分钟显示为3位数字时，“分钟”文本不是centered。

这里是codepen：https://codepen.io/jimasun/pen/PzAqVw/

// 
// ------------------------- FlipClock 
// 
$clock-flip-font-size: 120px 
$clock-flip-border-radius: 8px 
$clock-digit-gap: 20px 
$clock-dot-size: 20px 

$clock-height: ($clock-flip-font-size * 1.2) 
$clock-flip-width: ($clock-flip-font-size * 0.8) 
$clock-flip-margin: ($clock-digit-gap/2) 
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin)) 

$clock-flip-bg: #607D8B 
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7) 
$clock-flip-font-color: #F44336 
$clock-flip-font-shadow: 0 1px 2px #000 

.countdown-wrapper 
    left: 50% 
    position: absolute 
    top: 50% 
    transform: translate(-50%, -50%) 

.countdown.flip-clock-wrapper ul 
    height: $clock-height 
    margin: 0 $clock-flip-margin 
    width: $clock-flip-width 
    box-shadow: $clock-flip-shadow 

.countdown.flip-clock-wrapper ul li 
    line-height: $clock-height 

.countdown.flip-clock-wrapper ul li a div div.inn 
    background-color: $clock-flip-bg 
    color: $clock-flip-font-color 
    font-size: $clock-flip-font-size 
    text-shadow: $clock-flip-font-shadow 

.countdown.flip-clock-wrapper ul, 
.countdown.flip-clock-wrapper ul li a div div.inn 
    border-radius: $clock-flip-border-radius 

.countdown.flip-clock-wrapper ul li a div.down 
    border-bottom-left-radius: $clock-flip-border-radius 
    border-bottom-right-radius: $clock-flip-border-radius 

.countdown.flip-clock-wrapper ul li a div.up:after 
    top: (($clock-height/2) - 1px) 

.countdown .flip-clock-dot.top 
    top: ($clock-height/2 - $clock-flip-font-size * 0.2 - $clock-dot-size/2) 

.countdown .flip-clock-dot.bottom 
    top: ($clock-height/2 + $clock-flip-font-size * 0.2 - $clock-dot-size/2) 

.countdown .flip-clock-dot 
    height: $clock-dot-size 
    left: $clock-dot-size 
    width: $clock-dot-size 
    background: $clock-flip-bg 

.countdown .flip-clock-divider 
    height: $clock-height 
    width: ($clock-dot-size * 3) 
    &:first-child 
    width: 0 

.countdown .flip-clock-divider.seconds .flip-clock-label, 
.countdown .flip-clock-divider.minutes .flip-clock-label 
    right: -1 * $clock-flip-section-width 

.countdown .flip-clock-divider .flip-clock-label 
    color: $clock-flip-font-color 
    font-size: $clock-flip-font-size/4 
    width: 2 * $clock-flip-width + 4 * $clock-flip-margin 
// 
// ------------------------- FlipClock 
//

来源

2016-08-24 13:28:39 jimasun

调整flipclock.js不调整预期

回答

相关问题