html - DW 在我的内联列表中使用什么中心点？

Question

所以我将文本“Jonathon Smith Photography”居中对齐。在它正下方的另一个 DIV 中，我居中对齐了一个包含“Portfolio Contact Bio”的内联列表(我的导航栏)。但是它们似乎集中在不同的点？ “Jon smith photography”文本没有其他属性。导航栏中的列表项(不是导航栏 div 本身)具有背景颜色以及其上方/下方/左侧/右侧的填充。但是，当我禁用颜色/填充属性时，文本仍然显示在不同点的中心。现在我猜列表的中心点是关闭的，因为它比纯文本复杂一点。我如何让它们正确对齐？

HTML:

<div id="title">Johnathon Smith Photography</div>

<div id="navbar">
  <ul>
    <li>Portfolio</li>
    <li>Contact</li>
    <li>Bio</li>
  </ul>
</div>

CSS:

#title {
text-align: center;
}
#navbar ul li {
background-color: #00225A;
display: inline;
list-style-type: none;
color: #fff;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
}
#navbar {
text-align: center;
}

Answer 1

添加这个:

#navbar ul {
       padding-left: 0;   
}

默认情况下，ul 在左侧有一个填充。