3

我正在尝试设计一个简单的倒数计时器 - 但我遇到了一个我不明白的问题。

我在两个我不想要的内联 div （带有绿色边框的）之间获得了空间。查看 Chrome 的“检查元素”中的 CSS，我看不出它来自哪里——我也无法摆脱它。

数字之间不需要的空格

我注意到绿色边框在第一个计时器间隔也发生了变化 - 任何人都知道这是为什么以及如何阻止它？如何管理这 2 个 div 之间的空间？

最终，我想要类似codecanyon计时器之类的东西，但我不希望有人为此提供完整的 CSS，只是帮助我理解上述问题。

我正在使用Google Chrome 版本 23.0.1271.95m。

小提琴示例中的代码：

html。

<div id="timer1-wrapper">
    <div class="timer">
        <div class="timer-values-wrapper">
            <div class="timer-value-wrapper">
                <div class="minutes-value-1">
                    1
                </div>
                <div class="minutes-value-2">
                    4
                </div>
            </div>
            <span>minutes</span>
        </div>
        <div class="timer-values-wrapper">
            <div class="timer-value-wrapper">
                <div class="seconds-value-1">
                    5
                </div>
                <div class="seconds-value-2">
                    9
                </div>
            </div>
            <span>seconds</span>
        </div>
    </div>
</div>​

Javascript。

var minutes = 14;
var seconds = 59;

var secondsTimer = setInterval(function () {
    seconds--;
    if (seconds < 0) {
        if (minutes == 0) {
            clearInterval(secondsTimer);
            alert('Time is up');
            return false;
        }
        else {
            minutes -= 1;
           var minutesString = minutes < 10 ? '0' + minutes.toString() : minutes.toString();
           $('.minutes-value-1').text(minutesString.substr(0, 1));
           $('.minutes-value-2').text(minutesString.substr(1, 1));
           seconds = 59;
       }
    }
    var secondsString = seconds < 10 ? '0' + seconds.toString() : seconds.toString();
    $('.seconds-value-1').text(secondsString.substr(0, 1));
    $('.seconds-value-2').text(secondsString.substr(1, 1));
}, 1000);​

CSS。

.timer {
    border: 1px solid Red;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

.timer-values-wrapper {
    border: 1px solid Blue;
    font-size: 4em;
}

.timer-values-wrapper span {
    border: 1px solid Black;
    font-size: 0.5em;
}

.timer-value-wrapper {
    border: 1px solid Purple;
}

.timer-value-wrapper div {
    border: 1px solid Green;
    display: inline;
}​
4

5 回答 5

2

当您有两个内联元素时，标记中的空白就是屏幕上的空白。如果您将标记更改为标记中<div style="white-space: nowrap;" class="timer-value-wrapper"><div class="seconds-value-1">4</div><div class="seconds-value-2">3</div></div>没有空格，那么空格就会消失。您的另一个选择是使用浮动 div 或类似的东西。

于 2012-12-09T20:26:39.630 回答
2

HTML 源代码中的空白是这里唯一的问题

演示

HTML

<div class="timer-value-wrapper"><div class="seconds-value-1">5</div><div class="seconds-value-2">9</div></div>
于 2012-12-09T20:28:37.817 回答
1

如果你浮动 div，这应该消除额外的空间：

http://jsfiddle.net/nnZdF/8/

.timer-value-wrapper div {
    border: 1px solid Green;
    display: inline;
    float: left;
}
于 2012-12-09T20:25:40.220 回答
1

最简单的解决方案是将 div 放在一起：

<div class="seconds-value-1">
    5
</div><div class="seconds-value-2">
    9
</div>
于 2012-12-09T20:25:58.883 回答
0

空白仅在块元素之前和之后被忽略，而不是内联元素。您的 HTML 代码中有空格、换行符和制表符空格。

于 2012-12-09T20:26:55.610 回答