CSS空间显示：表格单元格

我有动态生成<ul>列表的代码，每个列表中有两个<li>。如果没有足够的空间，我希望这些显示在彼此旁边/分成下一行。CSS空间显示：表格单元格

目前我有这个

ul.pictureBlocks{ 
    display: table-cell; 
}

这显示它们彼此相邻，它们之间0空间。我试过border-spacing和margin或padding，但没有任何工作。当我在ul标签上使用display: table时，它从border-spacing获得间距，但是将它们显示在彼此之下。

显示：表父和表单元格为孩子的 –

尝试'显示：内联block'然后填充或保证金... – Radian

两者都没有工作 – Killerpixler

得到它

.pictureblocks{ 
    display: inline-table; 
    border-spacing: 10px; 
    border-collapse: separate; 
}

2014-02-24 19:58:09 Killerpixler

inline-block + margin：10px会做:)，很多有趣的事情为你http://stackoverflow.com/tags/css/info –

内联块和保证金实际上并不工作。我尝试过这个。我尝试了所有的解决方案，但内联表是唯一为我工作的解决方案 – Killerpixler

你可以试试这个给力之间的空间和水平对齐。

/- CSS代码---/

ul{list-style-type:none;} 
ul li{display:inline-block; background-color:#ef8913; padding:5px;} 
ul li a{ color:blue}

/- HTML代码 -/

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    </ul>

试试这个链接。 http://jsbin.com/kunavupa/1/edit

2014-02-24 19:59:04

尝试display:inline-block，然后填充或保证金...

ul li{ 
    display: inline-block; 
    background:red; 
    height:20px; 
    width:20px; 
}

2014-02-24 19:59:25 Radian

回答