CSS space display: table-cell out

Question

I have code that dynamically generates <ul> lists each with two <li> in them. I want those to be displayed next to each other / broken into the next line if there isn't enough room anymore.

Currently I have this

ul.pictureBlocks{
   display: table-cell;
}

This displays them next to each other with 0 space between them. I tried border-spacing and margin or padding but nothing worked. When I used display: table on the ul tag it got the spacing from border-spacing but displayed them beneath each other.

Answer 1

Got it

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

Answer 2

you can try this to give space between li and align them horizontally.

/--CSS Code---/

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

/--HTML Code --/

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

Try this link. http://jsbin.com/kunavupa/1/edit

Answer 3

try display:inline-block and then padding or margin...

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

jsfiddle