如何使用CSS创建居中，左对齐，宽度可变的项目符号列表? [英] How can I make a centered, left-aligned, variable-width bullet list with CSS?

问题描述

是否可以将左对齐列表居中?就像，我希望列表本身居中，但希望项目符号要在彼此下方对齐.

Is it possible somehow to center a left-aligned list? Like, I want the list itself centered, but want the bullet points to line up below each other.

我知道如果给列表一个固定的宽度和边距自动值，我可以执行此操作，但是我真的不想在其上设置宽度，因为我不知道内容的宽度. /p>

I know I could sort of do this if I give the list a fixed width and margin auto, but I really don't want to set a width on it since I don't know how wide the content will be.

推荐答案

在ul上使用display: inline-block，在父元素上使用text-align: center.

Use display: inline-block on the ul, and text-align: center on a parent element.

请参见: 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/

If you need it to work in IE7, here's how: http://jsfiddle.net/thirtydot/E3Yjr/1/

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

这篇关于如何使用CSS创建居中，左对齐，宽度可变的项目符号列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！