How to equally distribute elements horizontally using CSS

Question

I have eleven dots arrange horizontally using CSS. How can I evenly/equally distribute spacing between elements (mine are elements) based on the wi

Answer 1

If you don't have a problem to change the layout then use it like below.

HTML

CSS

  span.circle {
   height: 20px;
   width: 20px;
   border-radius: 100%;
   border: 1px solid #eee;
   background:#ffffd;
   cursor: pointer;
   display:inline-block;
   transition: all 0.4s ease-in-out;
  }
 .test div{display:table-cell; width:auto; text-align:center;}
 .test{display:table; width:100%;}

FIDDLE DEMO