如何在這些CSS界之間放置一個空格？

我目前正試圖渲染頁面上的各種圈子。我目前正在起草使用修改CSS圓圈從以下網頁：如何在這些CSS界之間放置一個空格？

https://css-tricks.com/examples/ShapesOfCSS/

在上面的鏈接圈的CSS繪製圓，但我遇到了兩個問題：

我需要的圓到遠離彼此間隔開（也許3px？）
我需要的圈是在同一水平線上
我似乎無法做圖1和2在相同的TI我

我使用下面的HTML和CSS：

.circle-blue { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: deepskyblue; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.circle-gray { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: gray; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    font-size: 6px; 
 
}

<div class="circle-blue cell"></div> 
 
<div class="circle-gray cell"></div> 
 
<div class="circle-blue cell"></div>

我的圈子div在我的HTML實現circle和cell類。

下Plunker鏈接會帶你到我的例子：

http://plnkr.co/edit/SPHmKyOjF6GbTtjEFPrd?p=preview

注：圈子都很小，所以你必須看看Plunker預覽模式下的非常左上角找到他們。

來源

2015-05-14 idungotnosn

的問題是，你正在設置div到display: table-cell;。當他們的display屬性設置爲table-cellmargin並不適用於元素。 http://www.w3.org/TR/CSS2/box.html#margin-properties指出margin：

適用於：所有元素，除了與除表字幕，桌子和直列表其它

的一種方法，以獲得所需的結果將是，以除去表顯示類型的元素代替display: table-cell;並將float: left;和margin-right: 3px;添加到圓圈。

.circle-blue { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: deepskyblue; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.circle-gray { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: gray; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.cell { 
 
    /*display:table-cell; Remove this*/ 
 
    font-size: 6px; 
 
    float: left; /*Add this*/ 
 
    margin-right: 3px; /*Add this*/ 
 
}

<div class="circle-blue cell"></div> 
 
<div class="circle-gray cell"></div> 
 
<div class="circle-blue cell"></div>

來源

2015-05-14 13:38:53

謝謝。這工作。一旦SO的9分鐘接受答案政策過期，我會選擇這一個作爲正確的答案。 – idungotnosn

如果你想保持流動性，你可以從使用表格得到流暢性，以便響應，那麼這種技術不會起作用，浮動也會將它們帶出正常流程，並且不會推動你的容器。 – DCdaz

@idungotnosn沒問題，很高興我可以幫忙。我已經添加了一些更多的細節來解釋爲什麼'margin'在原始示例中不起作用。 –

使用此

.cell{ 
    margin-left: 5px; 
    display: inline-block; 
    font-size: 6px; 
    }

而不是

.cell{ 
    display: table-cell; 
    font-size: 6px; 
}

來源

2015-05-14 13:41:15

使用表不要放在內容他們像圖像等那樣把一個新的div時在單元格內部專門用於內容，然後在y上使用填充我們的細胞的間距如下。

這樣你能保持細胞的流動性做響應屈尊時，它不會壓低像浮動或內聯塊將它我假設，因爲使用表顯示你的，你在做什麼。

.circle-blue { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: deepskyblue; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.circle-gray { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: gray; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    font-size: 6px; 
 
    padding: 10px; 
 
}

<div class="cell"> 
 
    <div class="circle-blue"></div> 
 
</div> 
 
<div class="cell"> 
 
    <div class="circle-gray"></div> 
 
</div> 
 
<div class="cell"> 
 
    <div class="circle-blue"></div> 
 
</div>

來源

2015-05-14 13:42:54 DCdaz

它添加到類 '細胞'。

display: inline-block; 
margin: 0 3px; 
vertical-align: top;

plunker

來源

2015-05-14 13:43:08 LVDM

我認爲，如果你改變display: table-cell到inline-block，你會得到你預期的結果。當然你也需要保證金。希望得到這個幫助！

來源

2015-05-14 13:51:34

這是一個可行的解決方案嗎？

https://hdcs.cz/?q=node/26

代碼：

<style> 
.circle-blue { 
    width: 10px; 
    height: 10px; 
    background: deepskyblue; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 
.circle-gray { 
    width: 10px; 
    height: 10px; 
    background: gray; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 
.cell { 
    display: table-cell; 
    font-size: 6px; 
} 
</style> 
<table> 
<tr> 
<td style="padding: 5px"><div class="circle-blue cell"></div></td> 
<td style="padding: 5px"><div class="circle-gray cell"></div></td> 
<td style="padding: 5px"><div class="circle-blue cell"></div></td> 
</tr> 
</table>

問候，

托馬斯Tudja

來源

2015-05-14 14:11:09

如何在這些CSS界之間放置一個空格？

回答

相關問題