Question

美好的一天我试图将我的导航菜单放在我的网站上，有人可以帮忙吗？

我知道如何更改颜色和内容，但从未将导航置于

之前

感谢

以下代码：

/* Navigation
--------------------------------------------------------------------------------*/

#topnav {
clear: left;
margin: 0;
overflow: hidden;
}

#topnav ul {
list-style: none;
float: left;
}

#topnav ul li {
list-style: none;
float: left;
padding: 0 2px 0 0;
}

#topnav a {
float: left;
display: block;
color: #FFFFFF;
background: #00B0F0;
text-decoration: none;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
padding: 10px 15px 11px;
font-size: 15px;
border: 0;
outline: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
line-height: 1;
}

#topnav li#active a,
#topnav a:hover {
color: #FFFFFF;
background: #00B0F0;
border: 0;
}

这是与导航相关的HTML代码：

function initFlyouts(){initPublishedFlyoutMenus([{"id":"609790714960572849","title":"Home","url":"index.html"},{"id":"853266533690851204","title":"About us","url":"about-us.html"},{"id":"809862556966585268","title":"Pricing","url":"pricing.html"},{"id":"201576304336620950","title":"&#1593;&#1585;&#1576;&#1610;","url":"1593158515761610.html"}],'609790714960572849',"<li class='wsite-nav-more'><a href='#'>more...<\/a><\/li>",'active',false)}

和

<div id="topnav">
            <ul><li id='active'><a href='/index.html'>Home</a></li><li id='pg853266533690851204'><a href='/about-us.html'>About us</a></li><li id='pg809862556966585268'><a href='/pricing.html'>Pricing</a></li><li id='pg201576304336620950'><a href='/1593158515761610.html'>&#1593;&#1585;&#1576;&#1610;</a></li></ul>
            <div style="clear:both"></div>
        </div>

Answer 1

如果您不想在菜单中使用固定宽度，并希望获得IE7支持，可以试试这个：http://jsfiddle.net/7K74B/1/

实现此行为的步骤

删除css中的所有float:left;引用（以防止内容浮动到左侧 - 无中心）
从display:block;代码中删除<a>（以防止代码占据100％的宽度）。
将display:inline;设置为<li>个标签（将它们并排放置）。
将text-align:center;设置为<ul>，最终使您的菜单居中！

希望这有帮助！

注意：如果您使用此解决方案：因为您已删除所有float引用，您也可以删除此标记：<div style="clear:both"></div>，因为没有要清除的浮动元素。

Answer 2

这应该可以解决问题。请记住，其他人在您的评论中说，如果没有看到HTML，我们就不知道这是否是您需要的。

/* Navigation
--------------------------------------------------------------------------------*/

#topnav {
clear: left;
margin: auto 0;
overflow: hidden;
width: 400px; /*Define your own width here*/
}

Answer 3

垂直或水平居中？如果水平，那么这篇文章的第二个答案是有用的。如果是垂直的，那么使用类似的东西：

li a {
 vertical-align:middle;
 text-align:center;
 display:table-cell;
}

Answer 4

尝试使用以下代码，

#topnav ul {
    list-style: none;
    /*Removed Float*/
}

#topnav {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

希望它会有所帮助

Answer 5

以下是代码的修订版，菜单水平居中（无需宽度）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
#topnav {
clear: left;
margin: 0;
}

#topnav ul {
list-style: none;
overflow: hidden;
text-align: center;
margin:0; padding:0;
}

#topnav ul li {
list-style: none;
display: inline-block;
padding: 0 2px 0 0;
}

#topnav a {
float: left;
display: block;
color: #FFFFFF;
background: #00B0F0;
text-decoration: none;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
padding: 10px 15px 11px;
font-size: 15px;
border: 0;
outline: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
line-height: 1;
}

#topnav li#active a,
#topnav a:hover {
color: #FFFFFF;
background: #00B0F0;
border: 0;
}
</style>

</head>
<body>

<div id="topnav">
    <ul>
        <li id='active'><a href='/index.html'>Home</a></li><li id='pg853266533690851204'><a href='/about-us.html'>About us</a></li><li id='pg809862556966585268'><a href='/pricing.html'>Pricing</a></li><li id='pg201576304336620950'><a href='/1593158515761610.html'>&#1593;&#1585;&#1576;&#1610;</a></li>
    </ul>
</div>

</body>
</html>

如何使用.css集中我的导航

5 个答案: