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.

`margin` is [not applicable](http://stackoverflow.com/questions/18346083/space-between-divs-display-table-cell/18346159#18346159) to `table-cell` elements. Either [float](http://stackoverflow.com/questions/18521125/how-to-align-p-and-a-tags-side-by-side/18521184#18521184) the list items, or use [`inline-block`](http://stackoverflow.com/questions/21409424/display-list-item-elements-in-different-columns/21409646#21409646) to display them beside each other. — Hashem Qolami, Feb 24 '14 at 20:33

score 1 · Accepted Answer · answered Feb 24 '14 at 19:58

1

Got it

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

answered Feb 24 '14 at 19:58

Killerpixler

4,200
11
42
82

inline-block + margin:10px would do too :) , lots of interesting things there for you http://stackoverflow.com/tags/css/info – G-Cyrillus Feb 24 '14 at 19:59
inline-block and margin doesn't actually work. I tried it. I tried all the solutions but inline-table is the only one working for me – Killerpixler Feb 25 '14 at 12:58

score 0 · Answer 2 · answered Feb 24 '14 at 19:59

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

score 0 · Answer 3 · answered Feb 24 '14 at 19:59

0

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

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

jsfiddle

answered Feb 24 '14 at 19:59

Hamed mayahian

2,465
6
27
49

CSS space display: table-cell out

3 Answers3