如何使用CSS制作居中,左对齐,可变宽度的子弹列表？

Question

有可能以某种方式将左对齐列表居中吗？就像,我希望列表本身居中,但希望子弹点在彼此之下排列.

我知道如果我给列表一个固定的宽度和边距自动,我可以这样做,但我真的不想设置宽度,因为我不知道内容有多宽.

Answer 1

使用display: inline-block上ul,和text-align: center一个父元素.

请参阅: http ://jsfiddle.net/thirtydot/E3Yjr/

CSS:

.list-container {
    text-align: center;
}
ul {
    display: inline-block;
    text-align: left;
}

HTML:

<div class="list-container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item Looooooooooooooooooooooooonggg</li>
    </ul>
</div>

如果您需要它在IE7中工作,请按以下步骤操作:http://jsfiddle.net/thirtydot/E3Yjr/1/

display: inline-block;
*display: inline;
zoom: 1;