html - 无法将我的 li 在我的 ul 中居中在侧边栏中

Question

我是 css 和 html 的新手，正在尝试创建一个网站来改进和学习。我一直在搜索，但无法弄清楚如何修复侧边栏中的菜单，对我来说，ul 中的 li 似乎出于某种原因向右浮动，这是我的代码:

还有 Jsfiddle 链接: https://jsfiddle.net/h2bpxcxe/

#side-bar #recents {
    width: auto;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#recents h3 {
    text-align: center;
    padding-top: 4px;
}

#recents ul {
    margin-top: -10px;
    list-style-type: none;
    text-align: center;
}

#recents ul li {
    padding: 2% 0px;
    border-bottom: 1px solid black;
    background: grey;

如果有人能帮忙，谢谢! :)

Answer 1

UL - 元素默认有一个 padding-left。您需要重置此填充，这将使您的 li 元素在侧边栏中居中。

#recents ul {
    margin-top: -10px;
    list-style-type: none;
    text-align: center;
    padding-left:0px; //Adding this will center your LI's
}

FIDDLE

处理此类问题时的提示。查看浏览器开发人员工具中的元素。 Padding 和 Margin 将始终清晰地显示在那里。