Question

我有以下html：

<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit6"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit4"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit4"></div>
    <div class="count-digit digit2"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit3"></div>
    <div class="count-digit digit9"></div>
</div>

绑定到每个“.count-digit”是一个精灵（即背景图像），它代表一个数字的png。我试图让精灵以间距水平显示，如下所示：

06 04 42 39

我使用的CSS看起来像这样：

     .count-unit 
     {
         margin: 0 20px 0 20px;
         padding: 0 20px 0 20px;
     }

     .count-digit { 
        background-image     : url(Images/numbers.png); 
        background-color     : transparent; 
        background-repeat    : no-repeat; 
        float: left;
     } 

     .digit0 { 
        height               : 44px; 
        width                : 30px; 
        background-position  : -0px -0px; 
     }

仅显示一个样本数字（“.digit0”）。可以看出，我试图在包含“count-unit”div的每个“数字”图像对周围加上填充或边距。它不起作用。 “.count-digit”上的“float：left”正在绕过边距和填充设置。

我该如何解决这个问题？我倾向于认为我需要杀死花车，但另一种“显示：内联”可以防止精灵出现。

更糟糕的是，虽然这些精灵可以在IE8和Chrome上运行，但是当我打开IE8兼容模式时，它们并没有显示出来。我不确定那是什么意思。有什么想法吗？

Answer 1

float: left属性不应忽略边距或填充。我认为您应该为.count-unit类指定浮动。

.count-unit {
    margin: ...
    padding: ...
    float: left;
}

我在这里尝试过，似乎没有任何问题：http://jsfiddle.net/QGZjn/1/

带有Div和Floats的CSS间距

1 个答案: