Question

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

目前我有这个

ul.pictureBlocks{
   display: table-cell;
}

它们彼此相邻显示，它们之间有0个空格。我尝试了border-spacing和margin或padding，但没有任何效果。当我在ul标记上使用display: table时，它会从border-spacing获得间距，但会将它们显示在彼此之下。

Answer 1

搞定了

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

Answer 2

您可以尝试在li之间留出空格并水平对齐。

/ - 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

Answer 3

尝试display:inline-block，然后填充或边距......

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