努力集中在purecssmenu.com

-1

做我有我的purecssmenu.com和遇到問題IM試圖在這裏居中我的網頁上生成的代碼是一個菜單的CSS菜單...努力集中在purecssmenu.com

<!-- Start PureCSSMenu.com STYLE --> 
     <style> 
     #pcm{display:none;} 
     ul.pureCssMenu ul{display:none} 
     ul.pureCssMenu li:hover>ul{display:block} 
     ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;} 
     ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} 
     ul.pureCssMenu,ul.pureCssMenu ul { 
      margin:0px; 
      list-style:none; 
      padding:0px 2px 2px 0px; 
      background-color:#000000; 
      background-repeat:repeat; 
      border-color:#000000; 
      border-width:1px; 
      border-style:solid; 
     } 
     ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu { 
      display:block; 
      zoom:1; 
      float: left; 
     } 
     ul.pureCssMenu ul{ 
      width:80.85000000000001px; 
     } 
     ul.pureCssMenu li{ 
      display:block; 
      margin:2px 0px 0px 2px; 
      font-size:0px; 
     } 
     ul.pureCssMenu a:active, ul.pureCssMenu a:focus { 
     outline-style:none; 
     } 
     ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover { 
      display:block; 
      vertical-align:middle; 
      background-color:#000000; 
      border-width:1px; 
      border-color:#000000; 
      border-style:solid; 
      text-align:left; 
      text-decoration:none; 
      padding:2px 5px 2px 10px; 
      _padding-left:0; 
      font:11px Arial; 
      color: #969696; 
      text-decoration:none; 
      cursor:default; 
     } 
     ul.pureCssMenu span{ 
      overflow:hidden; 
     } 
     ul.pureCssMenu li { 
      float:left; 
     } 
     ul.pureCssMenu ul li { 
      float:none; 
     } 
     ul.pureCssMenu ul a { 
      text-align:left; 
      white-space:nowrap; 
     } 
     ul.pureCssMenu li.sep{ 
      text-align:left; 
      padding:0px; 
      line-height:0; 
      height:100%; 
     } 
     ul.pureCssMenu li.sep span{ 
      float:none; padding-right:0; 
      width:3px; 
      height:100%; 
      display:inline-block; 
      background-color:#cccccC#111111 #111111 #cccccc; background-image:none;} 
     ul.pureCssMenu ul li.sep span{ 
      width:100%; 
      height:3px; 
     } 
     ul.pureCssMenu li:hover{ 
      position:relative; 
     } 
     ul.pureCssMenu li:hover>a{ 
      background-color:#000000; 
      border-color:#000000; 
      border-style:solid; 
      font:11px Arial; 
      color: #ffa500; 
      text-decoration:none; 
     } 
     ul.pureCssMenu li a:hover{ 
      position:relative; 
      background-color:#000000; 
      border-color:#000000; 
      border-style:solid; 
      font:11px Arial; 
      color: #ffa500; 
      text-decoration:none; 
     } 
     ul.pureCssMenu li.dis a { 
      color: #666 !important; 
     } 
     ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px; 
     height:16px; 
     } 
     ul.pureCssMenu ul img {width:16px; 
     height:16px; 
     } 
     ul.pureCssMenu img.over{display:none} 
     ul.pureCssMenu li.dis a:hover img.over{display:none !important} 
     ul.pureCssMenu li.dis a:hover img.def {display:inline !important} 
     ul.pureCssMenu li:hover > a img.def {display:none} 
     ul.pureCssMenu li:hover > a img.over {display:inline} 
     ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline} 
     ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none} 
     ul.pureCssMenu a:hover ul{display:block} 
     ul.pureCssMenu span{ 
      display:block; 
      background-image:url(./images/arr_white.gif); 
      background-position:right center; 
      background-repeat: no-repeat; 
      padding-right:12px;} 
     ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif); 
     } 
     ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white.gif)} 
     ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)} 
     </style> 
<!-- End PureCSSMenu.com STYLE -->

這裏是html，女巫可能不需要在這張貼，但我想我會包括它..我只是想要在我的網站中心菜單。

<!-- Start PureCSSMenu.com MENU --> 
<ul class="pureCssMenu pureCssMenum"> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="home.html" target="scare">home</a></li> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">about</a></li> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>haunts</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> 
    <ul class="pureCssMenum"> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">2009</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">2010</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">2011</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">2012</a></li> 
    </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">studio</a></li> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> 
    <ul class="pureCssMenum"> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">nightmares</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">hauntworks</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">atmosfears</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">frightwears</a></li> 
    </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>links</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> 
    <ul class="pureCssMenum"> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">haunts</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">suppliers</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">resources</a></li> 
    </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">contact</a></li> 
</ul> 
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> 
<!-- End PureCSSMenu.com MENU -->

在此先感謝您的時間。

來源

2012-10-30 Party Mcfly

你可以在你的文章中加入你試圖做的中心菜單嗎？然後人們會更有可能提供幫助。如果您是CSS新手，請查看http://www.w3.org/Style/Examples/007/center.en.html –

與一個div環繞它，然後居中DIV。

<div class="table">

然後添加以下到你的CSS

.table { 
    display: table; /* Allow the centering to work */ 
    margin: 0 auto; 
}

見工作實例。 http://jsfiddle.net/uh2Jt/3/

來源

2012-10-30 16:56:22 zmanc

謝謝大家，明白了。浮動需要爲空，並且顯示變爲內聯塊 –

ul.pureCssMenu,ul.pureCssMenu ul { 
    margin:0 auto; 
}

來源

2012-10-30 16:45:14

這裏有一個解決方案。我發現的問題是.pureCssMenu是floated left。我剛剛覆蓋了這個，所以你可以看到它發生的地方。可能是一個更好的想法，但是如果你不明白，讓我知道，我會解釋更多。還與text-align: center;

http://jsfiddle.net/nYbcW/

包裹在一個 div (.centerme)

.centerme{ 
    text-align: center; 
} 
ul.pureCssMenu { 
    float: none !important; 
    display: inline-block !important; 
    text-align:center 
}

來源

2012-10-30 16:53:07

只設置：

ul.pureCssMenu,ul.pureCssMenu ul { 
    margin:0 auto; 
}

是行不通的，因爲它看起來像菜單的位置被設置爲absolute。相反，隨着菜單的代碼搞亂的，你可以把它放在一個包裝DIV像這樣：

<div class="menuWrapper"> 
    all the html for the menu 
</div>

，然後使用這個CSS，與任何寬度對你的作品：

.menuWrapper{ 
    margin: 0 auto; 
    width: 400px; 
}

時退房例如這裏：http://jsfiddle.net/mCmfU/

來源

2012-10-30 16:58:38 Nathron

這是最簡單的，你可以得到：

ul.pureCssMenu,ul.pureCssMenu ul { 
    margin:0 auto; 
    float: none; 
    height: 25px; 
    width: 25%; 
}

剛根據需要調整寬度和高度。

注意：您可以將這一點的代碼添加到您的樣式的底部，所以你不需要打擾搜索它。

來源

2012-10-30 17:11:08

努力集中在purecssmenu.com

回答

相關問題