CSS - 获取不需要的水平空间

我试图设计一个简单的倒数计时器 - 但我遇到了一个我不明白的问题。CSS - 获取不需要的水平空间

我得到两个inline-divs（绿色边框）之间的空间，我不想要。在Chrome的“检查元素”中查看CSS我看不到它来自哪里 - 也不能摆脱它。

Unwanted space between the numbers

我注意到，绿色边界改变第一计时器间隔太 - 任何人都知道这是为什么，我怎么能阻止它？我如何管理这两个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; 
}

来源

2012-12-09 PeteGO

当你在标记中有两个内联元素空白是屏幕上的空白。如果您将标记更改为<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-09 20:26:39

+1为白色空间：nowrap; – PeteGO

Doh！太简单了 – Ruskin

如果浮动的div，这应消除多余的空间：

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

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

来源

2012-12-09 20:25:40 Chris

真实的 - 但在白色空间是来自它并没有告诉我。 – PeteGO

最简单的方法是放置Div组合在一起：

<div class="seconds-value-1"> 
    5 
</div><div class="seconds-value-2"> 
    9 
</div>

来源

2012-12-09 20:25:58 rdiazv

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

来源

2012-12-09 20:26:55 HerrSerker

白色空间是这里唯一的问题

Demo

HTML

<div class="timer-value-wrapper"><div class="seconds-value-1">5</div><div class="seconds-value-2">9</div></div>

来源

2012-12-09 20:28:37

CSS - 获取不需要的水平空间

回答

相关问题