为什么我的 `margin: 0 auto;` 没有将我的元素集中在 100% 宽度的父级中？

为什么使用“margin: 0 auto;”将元素居中在 100% 宽度内，父级不起作用

问题描述：

考虑这种情况：您有一个宽度设置为 100% 的父级 div 和一个无序的列出其中。您已应用“margin: 0 auto;”到无序列表以使其居中，但它拒绝让步。

问题原因：

问题的关键在于您已经定义了父 div 的宽度，而不是您尝试居中的元素的宽度。对于“保证金：0 自动；”为了有效地工作，必须指定居中元素的宽度。

解决方案：

要纠正此问题，请为无序列表指定宽度：

#header ul {
    margin: 0 auto;
    width: 90%;
}

额外注意事项：

为了获得更优雅的外观，请考虑以下改进：

• 删除“float: left;” “li”元素中的属性，因为它与“display: inline”冲突，并在 IE6 和更早版本的浏览器中创建意外的边距加倍。
• 将下面的样式属性直接应用于“li”元素：

#header ul li {
    color: #CCCCCC;
    display: inline;
    font-size: 20px;
    padding-right: 20px;
}

以上是为什么我的 `margin: 0 auto;` 没有将我的元素集中在 100% 宽度的父级中？的详细内容。更多信息请关注PHP中文网其他相关文章！