3

シンプルなカウントダウン タイマーのスタイルを設定しようとしていますが、理解できない問題が発生しました。

2 つのinline-div (緑色の境界線を持つもの) の間に不要なスペースができています。Chrome の「Inspect Element」で 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

インライン要素が 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 に答える