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

Question

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

还有 Jsfiddle Link： 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

就这样

<div id="recents">


            <ul><h3>Recent Posts</h3>
                <li><a href="#">Recent One</a>
                </li>
                <li><a href="#">Recent Two</a>
                </li>
                <li><a href="#">Recent Three</a>
                </li>
                <li><a href="#">Recent Four</a>
                </li>
            </ul>
        </div>

Answer 2

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 总是会在那里清楚地显示。

Answer 3

我觉得边栏的 list/ul 元素的定位也有问题。

如果您申请：

#recents ul {
    position:absolute;
}

您的 CSS，它将阻止列表元素溢出父元素，这是您当前代码的情况。这是一个 jsfiddle：https://jsfiddle.net/46t4f5zs/

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

Cant Center my li within my ul In sidebar

html

css

center

html-lists