Question

我需要在导航栏中集中对齐顶级导航到什么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; }

但是这让我的第二个导航级别项目在一条线上组合在一起？

Answer 1

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

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

Answer 2

没有发生，因为ul的宽度为100％。如果您希望ul位于中心，则其父元素必须具有固定宽度text-align:center。

Here is the fiddle.

Answer 3

将css更改为此，

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

将#nav设为固定width并删除float:left;

如何使用float：left将文本置于导航中心

HTML代码

CSS代码

修改

3 个答案: