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; }

しかし、これで 2 番目のナビゲーション レベルのアイテムが 1 行にまとめられましたか?

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 に答える