所以我一直在为即将到来的页面制作一个倒计时插件,你可以在这里看到https://codepen.io/PlatoCode/pen/NRGxBx
当你看到第一个时,它正好在中心,但问题是我想要最后一个列表项,即秒数被固定在位,这意味着当数字改变时,它不会#39 ; t移动另一个元素。
我希望它能够得到修复,因此我所做的就是定位它并添加“定位:固定'对于它,但接下来发生的是整个倒计时向右移动一点并且不会完全位于中心。
此外,我复制了代码,因此您可以注意到差异。在第二个问题中,有一个叫做“编辑”的课程。秒钟。你可以玩它,并告诉我可以做什么,以便看起来像我希望它的样子。
这是css代码:
#clock {
margin: 30px auto;
text-align: center;
}
#clock li {
display: inline-block;
text-align: center;
color: blue;
font-family: "Oswald";
padding: 0 20px;
}
#clock .seconds {
/* If I add position: fixed, it moves the entire div to the right a little bit */
}
#clock span {
font-size: 100px;
}
#clock .smalltext {
font-size: 23px;
font-weight: 100;
}

<ul id="clockdiv">
<li>
<span class="days"></span>
<div class="smalltext">Days</div>
</li>
<li>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</li>
<li>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</li>
<li>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</li>
</ul>
&#13;
答案 0 :(得分:1)
正如@kiner_shah所说:
您的ul的ID是clockdiv
,而不是clock
您的最终代码应如下所示:
#clockdiv {
margin: 30px auto;
text-align: center;
}
#clockdiv li {
display: inline-block;
text-align: center;
color: blue;
font-family: "Oswald";
padding: 0 20px;
}
#clockdiv .seconds {
/* If I add position: fixed, it moves the entire div to the right a little bit */
}
#clockdiv span {
font-size: 100px;
}
#clockdiv .smalltext {
font-size: 23px;
font-weight: 100;
}
<ul id="clockdiv">
<li>
<span class="days"></span>
<div class="smalltext">Days</div>
</li>
<li>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</li>
<li>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</li>
<li>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</li>
</ul>
答案 1 :(得分:0)
<强> CSS 强>
#clockdiv{
background-color:#069;
position:fixed;
width:300px;
height:420px;
top:30%;
left:40%;
}
<强> HTML 强>
<ul id="clockdiv">
<li>
<span class="days"></span>
<div class="smalltext">Days</div>
</li>
<li>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</li>
<li>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</li>
<li>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</li>
</ul>
答案 2 :(得分:0)
我认为从您的li中删除填充,并且将其作为宽度添加到您的时间跨度,您将会进入。请看一下这个代码段。
我从#clockdiv css中删除了保证金,只是为了在此页面上修复它,但您可以在代码中替换它。
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
}
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 36 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
#clockdiv {
margin: 0 auto;
text-align: center;
}
#clockdiv li {
display: inline-block;
text-align: center;
color: blue;
font-family: "Oswald";
padding: 0;
}
#clockdiv span {
text-align:center;
display:block;
width:120px; /* current with plus removed padding fro li #clockdiv li */
font-size: 100px;
}
#clockdiv .smalltext {
font-size: 23px;
font-weight: 100;
}
<ul id="clockdiv">
<li>
<span class="days"></span>
<div class="smalltext">Days</div>
</li>
<li>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</li>
<li>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</li>
<li>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</li>
</ul>