Html div中的中心列表（用于导航栏）

离开本教程顶部的注释（），我尝试将页面中的两个链接列表居中，但它仅居中于第一个列表项，而不是整个列表

li{
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
}
ul{
    text-align: center;
}

div#nav-list {

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;

    width: auto;
    height: auto;
    background: #E8E8E8;
}

“导航列表”是导航栏的容器，如灰色图片所示

问题是——你可以看到“关于”是居中的，但不是整个列表。

提前谢谢！ 编辑：以下是HTML：

<div id="center_content">
    <h1 id="page-heading">Title</h1>
    <hr id="first-rule"></hr>
    <div id="nav-list">
        <ul>
            <li>about</li> <li>work</li> 
        </ul>
    </div>
    <hr></hr>
    <p>Here is a paragraph. </p>
</div>

标题


关于工作


这里有一段

尝试应用以下样式：

ul { 
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 170px; /*as per your need*/
}

这对你来说怎么样：

CSS

li {
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
    padding: 10px;
}

ul {
    text-align: center;
    background:red;
    width: 25%;
    margin:0 auto;
}
ul li:first-child {

    background:#ccc;
    display:block;
    margin:0 0 0 -40px;
}

HTML

<ul>
    <li>TITLE</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

头衔
项目1
项目2
项目2

只需播放设置，我添加了一些颜色，这样您就可以看到试试这个

<div>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

---

删除列表填充。默认情况下，列表左侧有一个

40px

填充。尝试使用

ul{padding:0；}

给你：

1） 设置

文本对齐：居中

2） 在列表上设置d
isplay:inline块


li {
    font-family: Futura, Arvo, sans-serif;
    display:inline-block;
    padding: 0 10px;
}
ul{

    list-style: none;
    display: inline-block;
    padding:0;
}

div#nav-list {

    text-align: center;
    background: #E8E8E8;
}

那似乎没什么作用。仍与第一个列表项对齐。内联块不应该应用于列表项，而不是列表本身吗？请显示完整的html和css以供导航。然后它将更容易解决。更新更多的代码。试试这个提琴，嗯，它稍微朝着正确的方向移动，但它仍然没有居中。我还尝试添加边距：0，但没有任何效果。如果没有其他定义覆盖您的样式，那么ul
{margin:0 auto；text align:center；padding:0；}
和li
{display:inline block；}
的设置将是您的答案。设置这些样式并再次检查，如果它们仍然不起作用，请检查是否覆盖规则谢谢！我在层次结构中更上层的div上设置了一个文本缩进。
li {
    font-family: Futura, Arvo, sans-serif;
    display:inline-block;
    padding: 0 10px;
}
ul{

    list-style: none;
    display: inline-block;
    padding:0;
}

div#nav-list {

    text-align: center;
    background: #E8E8E8;
}