居中水平菜單中的各個菜單項目

我想居中個別菜單項目在這個水平CSS菜單中（從purecssmenu.com獲得）。居中水平菜單中的各個菜單項目

他們目前浮到左邊，我希望他們爲中心

<div class="wrapper"> 
    <ul class="pureCssMenu pureCssMenum"> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu1</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu2</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="#">Submenu1</a></li> 
      <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Submenu2</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="#">Submenu3</a></li> 
       <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu4</a></li> 
       <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu5</a></li> 
      </ul> 
      <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
     </ul> 
     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu3</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="#">Submenu1</a></li> 
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu2</a></li> 
     </ul> 
     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu4</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu5</a></li> 
    </ul> 
</div>

完整的HTML標記和CSS可在此的jsfiddle http://jsfiddle.net/28X9v/

的解決方案應該是跨瀏覽器兼容，應至少在ie7/8中工作

來源

2014-06-13 rogerb

我想這是你想要的答案。

http://jsfiddle.net/28X9v/5/

<span>....</span>

用於在代碼對準。而已。

來源

2014-06-13 06:39:58

您可以修復鏈接並添加jsfiddle。我會接受你的迴應。 – rogerb

只是想指出，@Nerranth的解決方案是建立在Era的建議之上的。多謝你們！ – rogerb

我剛剛注意到，隨着您的更改，IE7將水平菜單渲染爲垂直菜單。有什麼建議麼？在IE8 +和Chrome中運行良好 – rogerb

從您的li's刪除浮動：Demo

ul.pureCssMenu, ul.pureCssMenu ul {text-align:center;} 
ul.pureCssMenu li { display:inline-block;}

來源

2014-06-13 06:12:58 Era

它擾亂了對齊，並使菜單凌亂 –

@Era - 感謝您的迴應。我認爲你的建議是有道理的，但它確實弄亂了垂直對齊。有關如何修復它的任何建議。 – rogerb

多數民衆贊成那是因爲跨度..這是不完整的CSS我猜..和圖像也不存在..這可以通過添加跨度到'LI'中的每個文本解決..希望我很清楚。 – Era

哎視圖測試此代碼

.pureCssMenum li > ul.pureCssMenum li{ 
    float: left; 
} 
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenum{ 

    position:absolute; 
    top:40px; 
    } 
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenui li{ 
    float:none; 
    position:relative; 

}

http://jsfiddle.net/kisspa/LdXU5/

來源

2014-06-13 06:23:45 Kisspa

感謝您的回覆。但不幸的是，這不是我想要的。 – rogerb

進行以下修改你的CSS

爲了增加子菜單寬度以適應右移

ul.pureCssMenu ul { 
    width:110px; 
}

和更改頁邊距值菜單項右移

ul.pureCssMenu li { 
    display:block; 
    margin:2px 0px 2px 18px; 
    font-size:0px; 
}

您可以更改margin屬性的最後一個參數去的元素更移向右側。

這裏是小提琴http://jsfiddle.net/28X9v/3/

來源

2014-06-13 06:27:40

感謝您的回覆。這是一個很好的建議，但它仍然完全集中它。也許如果我調整寬度和邊距值，我可以讓它工作。 – rogerb

將18px更改爲20px，將110px更改爲115px –

居中水平菜單中的各個菜單項目

回答

相關問題