1

我需要什么 css 来集中对齐导航栏中的顶级导航？我一直在玩它很长时间，但无法对其进行排序。

HTML 代码

<ul id="nav">
  <li  class="level0 nav-1 first level-top parent">
     <a href="#"  class="level-top" > <span>Women</span></a>
     <ul class="level0">
       <li  class="level1 nav-1-1 first"><a href="#" ><span>Tops</span></a></li>
       <li  class="level1 nav-1-2 last"><a href="#" ><span>Accessories</span></a>/li>
     </ul>
  </li>
  <li  class="level0 nav-2 level-top">
    <a href="#"  class="level-top" ><span>Men</span></a>
  </li>
  <li  class="level0 nav-3 level-top">
    <a href="#"  class="level-top" ><span>Accessories</span></a>
  </li>
</ul>

CSS 代码

/********** < Navigation */
.nav-container {  
background-color: #FFF;
border-color: #444;
border-top-style: solid;
border-bottom-style: solid;
border-width: 2px; width: 100%; margin:10px 0 0 0;  height: 28px;position: relative; 
}
.nav-container select { margin: 18px 0; }
.nav-container select { width: 100% }
#nav { float: left;
    font-size: 15px;
    margin: 0;
    width: 100%;
 }

/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-align:center;  }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; text-decoration:none; text-transform:uppercase; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/* 0 Level */

#nav li { 
    float: left; 
    padding: 4px 12px;
}
#nav li.active a { color: #999999; }
#nav a { color: #555555;
    float: left;
    font-weight: bold;
    padding-right: 11px; font-family:Arial, Helvetica, sans-serif;  }
#nav li.over a,
#nav a:hover { color: #999999; }


/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }

/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:30px; left:-10000px; border:1px solid #bbb; padding:3px 8px; background:#fcfcfc; }
#nav div ul { position:static; width:auto; border:none; padding:0; }

/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }

#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0;}

/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:-1px; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
.flex-direction-nav {display:none;}
/********** Navigation > */

编辑

通过更改此代码，我能够使顶层居中...

/* 0 Level */
#nav li { float: none; display:inline-block; }

但这使我的第二个导航级别项目在一条线上聚集在一起？

4

3 回答 3

1 
ul {text-align: center; width:100%}
ul li {display: inline-block; float: none;}

你应该这样写你的css。我的意思是 ul 应该是全宽和 text-align:center 属性，它的 li 应该有 display: inline-block 属性，它不应该向左或向右浮动；

于 2013-10-18T05:55:16.110 回答
1

它没有发生，因为ul有 100% 的宽度。如果要ul居中，则其父元素必须具有固定宽度和text-align:center.

这是小提琴。

于 2013-10-18T05:55:36.383 回答
1

将css更改为此，

  #nav { 
        font-size: 15px;
        margin: 0 auto;
        width:310px;
  }

给#nav一个固定的width并删除float:left;

于 2013-10-18T05:57:47.657 回答