如何使水平导航栏居中
Posted
技术标签:
【中文标题】如何使水平导航栏居中【英文标题】:How to center a horizontal navigation bar 【发布时间】:2013-02-17 18:33:28 【问题描述】:我很难将导航按钮放在我网站上的中心。我已经搜索并尝试了不同的选项,但没有发现任何成功。这是我的代码的样子。 PS - 我的代码来自一个优雅的主题模板。
#menu
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 3px solid #f7f7f7;
overflow: hidden;
#menu #main-menu
float: none !important!;
width: auto;
margin-left: auto;
margin-right: auto;
#menu .nav li
float: left;
border-right: 1px dashed #dcdcdc;
width: auto;
margin-left: auto;
margin-right: auto;
#menu .nav a, ul#mobile_menu a
font-size: 12px;
color: #c6c6c6;
text-decoration: none;
text-transform: uppercase;
display: block;
height: 44px;
overflow: hidden;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
#menu .nav a > span
padding: 12px 14px 11px;
#menu .nav ul li a > span
padding: 0;
#menu .nav ul li
border: none;
#menu .nav ul a, ul#mobile_menu a
padding: 14px 5px 14px 25px;
height: auto;
overflow: visible;
width: 195px;
#menu .nav ul a:hover, ul#mobile_menu a:hover
background: #4b93ad;
text-decoration: none;
span.menu_slide
color: #fff;
background: #549eb9;
ul#mobile_menu a
display: block;
padding-left: 5px;
padding-right: 5px;
width: auto;
#menu .nav > li.current_page_item > a:hover
background: none;
color: #c6c6c6;
【问题讨论】:
【参考方案1】:试试#menu margin: 0 auto;
或
#menu
float: left;
text-align: center;
#menu ul
display: inline-block;
如果您提供链接,我可以为您查看。
【讨论】:
以上是关于如何使水平导航栏居中的主要内容,如果未能解决你的问题,请参考以下文章