Html 为什么可以'；我不能将菜单栏居中吗？_Html_Css_Position_Center_Menubar

Html 为什么可以'；我不能将菜单栏居中吗？

html css

Html 为什么可以'；我不能将菜单栏居中吗？,html,css,position,center,menubar,Html,Css,Position,Center,Menubar,我对HTML和CSS非常陌生。我将菜单栏水平放置，但似乎无法将其与屏幕中心对齐。我试过margin:0自动和但两者似乎都不起作用这是我的密码： <html> <head> <style> #menu { margin:0 auto; float:left; list-style:none; padding:0; border-top:1 solid #ccc; border-left:1 solid #ccc; border-bottom:1 solid

我对HTML和CSS非常陌生。我将菜单栏水平放置，但似乎无法将其与屏幕中心对齐。我试过

margin:0自动

和

但两者似乎都不起作用

这是我的密码：

<html>
<head>

<style>

#menu {
margin:0 auto;
float:left;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}

#menu li {
float:left;
background-color:#f2f2f2;
}

#menu li a {
display:block;
padding:10px 80px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}   

#menu li a:hover {
color:#c00;
background-color:#fff;
}

</style>

</head>

<body>

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Donate</a></li>
</ul>

</body>
</html>


#菜单{
保证金：0自动；
浮动：左；
列表样式：无；
填充：0；
边框顶部：1个实心#ccc；
左边框：1个实心#ccc；
边框底部：1个实心#ccc；
}
#菜单里{
浮动：左；
背景色：#F2F2；
}
#菜单李a{
显示：块；
填充：10px 80px；
文字装饰：无；
颜色：#069；
右边框：1px实心#ccc；
字体大小：粗体；
}   
#菜单a：悬停{
颜色：#c00；
背景色：#fff；
}

如您所见，我使用的是

margin:0auto，但它不起作用。
如果您想将菜单置于其父元素（在本例中为主体）的中心位置，请为菜单指定一个宽度。此外，请删除您的浮动-如果您将其向某个方向浮动，它将不会居中
 如果要将菜单置于其父元素（在本例中为主体）的中心位置，请为菜单指定一个宽度。此外，删除浮动-如果将其浮动到某个方向，它不会居中
 你可以给菜单一个宽度宽度：400px或所需宽度。然后，您可以将左右边距设置为自动marginleft:auto；右边距：自动
您可以为菜单设置宽度宽度：400px或所需宽度。然后，您可以将左右边距设置为自动marginleft:auto；右边距：自动
您有浮动
元素。除非容器被视为块或内联块，否则浮动元素不会跟随该居中
要达到预期的结果，您可能需要执行类似于中的操作
通过添加一个容器，将边距居中，并使用#菜单上的display:inline block
，它们将像普通内容一样居中。注意，这在IE中可能不起作用，在这种情况下，您应该添加一行*display:inline
|代码
HTML
您有float
元素。除非容器被视为块或内联块，否则浮动元素不会跟随该居中
要达到预期的结果，您可能需要执行类似于中的操作
通过添加一个容器，将边距居中，并使用#菜单上的display:inline block
，它们将像普通内容一样居中。注意，这在IE中可能不起作用，在这种情况下，您应该添加一行*display:inline
|代码
HTML
您需要为菜单指定宽度
并删除float:left

例如
您需要为菜单指定宽度
并删除float:left

例如
你试过什么浏览器？是不是只有IE、Chrome或Firefox不起作用？你尝试过哪些浏览器？只是在IE、Chrome或Firefox中不起作用吗？谢谢你，我不知道我必须让整个身体居中。正如我之前所说，我对HTML和CSS是新手@我的答案是一个例子。谢谢你，我不知道我必须把整个身体放在中心。正如我之前所说，我对HTML和CSS是新手@仲裁人请参见我的答案，以获取示例。这不会使内容居中，因为内容（即li
s）也是浮动的。这不会使内容居中，因为内容（即lis）也是浮动的。
<div class='container'>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Donate</a></li>
    </ul>
</div>

.container{
    text-align: center;
    width: auto;
    margin: 0 auto;
}

#menu {
    margin:0 auto;
    display: inline-block;
    list-style:none;
    padding:0;
    border-top:1 solid #ccc;
    border-left:1 solid #ccc;
    border-bottom:1 solid #ccc;
}

#menu li {
    float: left;
    background-color:#f2f2f2;
}

#menu li a {
    display:block;
    padding:10px 10px;
    text-decoration:none;
    color:#069;
    border-right:1px solid #ccc;
    font-weight:bold;
}   

#menu li a:hover {
    color:#c00;
    background-color:#fff;
}

#menu {
margin:0 auto;    
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
width:900px;
display:block;
}