-1

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

我知道如何更改颜色和东西，但以前从未居中导航

谢谢

下面的代码：

/* 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>
4

5 回答 5

2

If you don't want to use fixed width in your menu, and want IE7 support, you can try this: http://jsfiddle.net/7K74B/1/

Steps to achieve this behaviour

  1. Delete all float:left; references in your css (to prevent content float to left - no centering)

  2. Delete the display:block; from <a> tags (to prevent tags take 100% width).

  3. Set display:inline; to <li> tags (to put them side by side).

  4. Set text-align:center; to <ul> to finally center your menu!

Hope this helps!

Note: In case you use this solution: because you have deleted all float references, you could also delete this markup: <div style="clear:both"></div>, because there's no float elements to clear.

于 2013-04-29T11:22:13.317 回答
0

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

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

#topnav {
clear: left;
margin: auto 0;
overflow: hidden;
width: 400px; /*Define your own width here*/
}
于 2013-04-29T11:12:58.357 回答
0

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

li a {
 vertical-align:middle;
 text-align:center;
 display:table-cell;
}
于 2013-04-29T11:14:37.067 回答
0

试试下面的代码，

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

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

希望它会有所帮助

于 2013-04-29T11:18:06.983 回答
0

这是您的代码的修订版本，菜单水平居中（不需要宽度）：

<!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>
于 2013-04-29T11:28:22.293 回答