html/css格式的文本赢得'；不要向左移动

因此，我开始编写html/css文档，但无法确切了解文本在菜单栏中的位置不正确的原因。我试着把文本对齐：左；边距：0自动和填充：0，这些似乎都不起作用。我还浏览了大量的问题，并通过validator.w3.org运行了我的html/css。如果有人能帮我，那就太好了

HTML:

---

编辑：我应该解释一下，文本较小的菜单是我想要向左移动一些空格的菜单，这样它看起来就不会有标签。我还修改了标题，这样就可以显示实际的问题所在

您没有为容器设置固定宽度，因此它们是100%宽度，您为

设置了
显示：内联
，因此您只需使用
文本对齐：居中
到

顺便说一句，正如@putvande在评论中所说的，你不能直接在
里面，你只能把
放进去。要避免放置
|
，请使用以下css：

div#menu li:after {
    content:'|';
}

你试过添加这个吗

div#menu ul {
    text-align: center;
}


移除车身上的边距和ul上的衬垫，以便更好地居中

此外，li之外的管道无效
请尝试以下操作：
div#菜单ul{填充：0；}

在浏览器中的图元上单击鼠标右键，然后单击“检查图元”。在那里你可以看到尺寸、边距和填充物的颜色。（至少对于chrome…
您的标记无效。li之间不能有|或任何其他标记或内容。应使用左边框或右边框进行分隔。可以使用li上的线条高度控制分隔符的高度，使用非使用空格上的左/右填充控制间距

<div id="menu">
    <ul>
    <li><a href="is.html">is</a></li>
    <li><a href="that.html">that</a></li>
    <li><a href="my.html">my</a></li>
    <li><a href="text.html">text</a></li>
    <li><a href="isn'tcentered.html">now centered</a></li>
    </ul>
</div>


重置样式表的目标是减少浏览器在默认行高、页眉边距和字体大小等方面的不一致

或

进口




你想居中放置div#菜单、div#站点#标题还是两者都要居中？你有没有试过将
文本对齐：居中放置在正文或要居中的div中？不允许在
li
之外放置
。@Joe，我忘了解释我需要将其向左移动，以便它与较大的文本对齐。对不起@安迪，我应该说我需要把div#menu移到左边，而不是中间谢谢，这很有效！这是我应该在每个文档中使用的东西，还是我应该只在我无法找出问题所在的情况下使用？我只是想确保我没有养成任何坏习惯。
div#menu ul {
    text-align: center;
}

<div id="menu">
    <ul>
    <li><a href="is.html">is</a></li>
    <li><a href="that.html">that</a></li>
    <li><a href="my.html">my</a></li>
    <li><a href="text.html">text</a></li>
    <li><a href="isn'tcentered.html">now centered</a></li>
    </ul>
</div>

div#menu ul a
{
    color:gray;
    font-size: 16px;
    text-decoration: none;    
    padding:0 10px;
}

div#menu ul a:hover
{
    color:black;
}

div#menu li
{
    display: inline;    
    line-height:14px;
    border-left:1px solid gray;
}

div#menu li:first-child{
     border-left:none;   

}

* {
  margin: 0;
  padding: 0;
}