中心导航栏基础5框架?

时间:2013-11-22 03:56:15

标签: html css

我经常搜索并尝试了多项更改,但我无法将导航栏置于中心位置。

<nav class="top-bar" data-topbar>
  <ul class="title-area">
      <li class="name">
                </li>
                  </ul>
                    <section class="top-bar-section">
                         <ul class="center">
                         <li><a href="#">Home</a></li>
                         <li><a href="#">Services</a></li>
                         <li><a href="#">Contact</a></li>
                         <li><a href="#">Client Area</a></li>
                         </ul>
                        </section>
</nav>

CSS非常大,所以我使用了Pastebin - http://pastebin.com/raw.php?i=E8WQT41K

无论我尝试什么,它都留在左边。

1 个答案:

答案 0 :(得分:0)

尝试这个。你的css太长了。只为你的导航部分应用这个css

.title-area
{
    list-style:none;
    float:left;
}
.top-bar-section
{
    width:300px;
    height:auto;
    margin:0 auto;
}
.center
{
  list-style:none;  
}
.center li
{
  list-style:none;
  display:inline-block;
}

http://jsfiddle.net/XNCj7/2/