html - CSS - 获得不需要的水平空间

Question

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

我在两个 inline-divs 之间留出空间(带绿色边框的)我不想要。查看 Chrome 的“Inspect Element”中的 CSS，我看不到它来自哪里 - 我也无法摆脱它。

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

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

我使用的是 Google Chrome 版本 23.0.1271.95m。

来自 fiddle 的代码示例:

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;
}​

Answer 1

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