如何对齐左侧，右侧和居中的列表元素

Question

看看这个小提琴： http://jsfiddle.net/ugxNK/

我希望第一个列表元素位于左角，中间位于中间，右侧位于右角。

对于不同的屏幕尺寸，我怎么能动态地这样做？

我只知道将它们与边距对齐。

问候！

Answer 1

为列表项添加宽度，如下所示：

.panel li
{
    display: inline-block;
    width:33%;
}

<强> jsFiddle example

Answer 2

您可以使用first-child，last-child和nth-child(n)等选择器。

Answer 3

也许尝试将它们分成百分比？

  

.panel li {float：left;宽度：40％;显示：块; text-align：left}

     

.panel li.center {width：20％; text-align：left}

     

.panel li.right {text-align：right}

Answer 4

您可以这样写：

.left { float:left }
.right { float:right }
ul{text-align:center; overflow:hidden}

选中此http://jsfiddle.net/ugxNK/4/