我如何集中列表？

Question

我试图把我的名单集中在一起，因为无论我尝试什么，我的生活都无法理解。显然，我并没有在正确的地方尝试正确的事情。帮助并解释我需要做什么。谢谢！

HTML

            <div id = "listwrapper">
                <h3>Partner Companies</h3>
                <ol id = "list">
                    <li><a href="http://store.steampowered.com/app/241240/">Steam Contraption maker</a></li>
                    <li><a href="https://www.gamingonlinux.com/articles/contraption-maker-casual-game-will-come-to-linux.3026">Contraptions coming to Linux</a></li>
                    <li><a href="unity3d.com/">Unity game developer engine</a></li>
                </ol>
            </div>

和CSS

#listwrapper
{
    margin: auto;
    text-align: center;
}

#list
{
    margin: auto;
}

#list li
{
    display: inline;
}

Answer 1

您必须重置浏览器添加的默认列表填充：

#list
{
    padding-left:0;
}

http://jsfiddle.net/nvuqf7wL/1/

您应该选择2种居中方法： -margin：汽车; -text-align：center;

如果你知道容器/列表的宽度并且你不想要这个容器的中心内容，那么第一个（margin auto）会更好。在这个特殊的例子中，这将是中心，但不是。

如果您不知道容器的宽度，则使用第二种方法（文本对齐）但如果您不想将此容器的内容居中，则必须将其重置为儿童/儿童的左侧。

http://jsfiddle.net/nvuqf7wL/3/

Answer 2

margin: auto o; // should centre item
margin-left: auto; // for i.e
margin-right: auto; // for i.e

上面的CSS应该是所有主流浏览器中的块级元素的中心。

整个列表而不是李，他们应该保持正确的顺序。

修改 作为参考，以下css应该能够显示订购数量

li {
        float:left;
        margin:10px;
        list-style-position:inside;
    }

Answer 3

您需要将html文件与css文件“链接”起来。这样做的方法是将此行添加到您的html文件中：

<link rel="stylesheet" type="text/css" href="yourcssfilename.css">

只需添加它，以便您的整个html文件如下所示：

<link rel="stylesheet" type="text/css" href="style.css">

<div id = "listwrapper">
                <h3>Partner Companies</h3>
                <ol id = "list">
                    <li><a href="http://store.steampowered.com/app/241240/">Steam Contraption maker</a></li>
                    <li><a href="https://www.gamingonlinux.com/articles/contraption-maker-casual-game-will-come-to-linux.3026">Contraptions coming to Linux</a></li>
                    <li><a href="unity3d.com/">Unity game developer engine</a></li>
                </ol>
            </div>

我通过添加该行尝试了您的代码，它的工作方式如下所示：

之前：

后：

如果您希望它显示如下：

然后在你的css文件中删除它：

#list li
{
    display: inline;
}