ul中的li横排问题

ul中的li横排距中问题
ul中的li横排相信大家都能做到，但是如果li不设宽度，不加浮动，还必须水平距中，相信就有点难度了吧。
li都不设宽度，如何让ul中的li横排距中显示呢？
关键就在块的显示方式
li默认是块级元素，此元素前后会带有换行符，所以每个li都会换行，通常我们为了让li横排都会加浮动
现在我们把浮动去掉，每个li都会换行，如何让li横排呢？玄机就在display。
让我们把块级元素转换成行内块级元素，问题就迎刃而解了。
style：

ul, li {list-style:none;padding:0;margin:0 auto;}
ul{ border:1px solid red; overflow:hidden;text-align:center}
ul li{ margin:0 10px;display:inline-block;border:1px solid #0033FF}

html：

<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
  <li>44</li>
</ul>