保證金自動夢魘

我嘗試了所有我能想到的方式，但對於我的生活，我無法弄清楚爲什麼導航菜單不會居中。我試過文字對齊，邊距自動，塊顯示......在父母和孩子。我相信這是一件非常簡單的事情，但這開始會導致脫髮。保證金自動夢魘

如果你想看到一些代碼，這裏的HTML：

<div id="navigation" class="col-full"> 

<ul id="main-nav" class="nav fl"> 

    <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://previews.tinygiantstudios.co.uk/">Home</a></li> 
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://previews.tinygiantstudios.co.uk/about-us/">About Us</a></li> 
    <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://previews.tinygiantstudios.co.uk/news/">News</a></li> 
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://previews.tinygiantstudios.co.uk/contact/">Contact</a></li> 

</ul> 
</div><!-- /#navigation -->

而且CSS

#navigation { 
    margin-bottom: 0px; 
    background-color: #131313; 
    border-top: 0px solid #DBDBDB; 
    border-bottom: 0px solid #DBDBDB; 
    border-left: 0px solid #DBDBDB; 
    border-right: 0px solid #DBDBDB; 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    font: 14px/14px sans-serif; 
    padding: 10px 0; 
} 

.nav { 
    z-index: 99; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    line-height: 1; 
    margin-left: 10px; 
} 

.fl { 
    float: left; 
} 

.nav li { 
    float: left; 
    width: auto; 
}

任何人都可以告訴我我失蹤了什麼？

謝謝，

來源

2011-12-05 Tiny Giant Studios

這是一個甜蜜的設計。只是想你想知道。 – Blender

將此代碼添加到您的CSS：

.nav { 
    text-align: center; 
    width: 100%; 
} 

.nav li { 
    float: none; 
    display: inline-block; 

    /* IE7 should be pleased */ 
    zoom: 1; 
    *display: inline; 
}

它不會與舊版本的IE（inline-block）的工作，但會出現什麼？

來源

2011-12-05 05:17:47 Blender

這似乎不適用於提供的測試頁面，我不明白爲什麼它會反正。 –

真的嗎？我使用Chrome的Inspector做到了這一點，它工作正常。 – Blender

是的，試過了 - 但它沒有發生:( –

要設置邊距爲自動，則需要指定的寬度，並且顯示元件作爲塊。

來源

2011-12-05 05:17:24 Brad

這就是我最初的想法，但似乎沒有在提供的測試頁面上工作。 –

@AndrewMarshall，我只是在Chrome中自己測試過，並且工作正常。 – Brad

嗯，我試過了，無法啓動它。哦，可能意味着是時候讓我的大腦休息和睡覺了。 –

將邊距設置爲零/自動僅適用於固定寬度的塊元素。刪除內聯浮動以使其生效。

來源

2011-12-05 05:25:19 jmkeyes

不確定我在追蹤 - 我嘗試了你的建議（至少我認爲我是）但它不工作...你有任何代碼我應該嘗試嗎？ –

同上Brad說的。除非您在其他地方完成該塊，否則不要使用內聯浮動。設置列表，使'ul'的左/右邊距設置爲'auto'，並將其強制爲固定寬度。 – jmkeyes

對於margin: 0 auto;你的元素定心必須display: block;，有一個固定的寬度不能與float浮動。

所以你需要從你的<ul>中刪除fl類，並給它一個固定的寬度。

來源

2011-12-05 05:29:09 Strelok

您應該指定一個寬度#navigation或#main-nav

眼下#navigation跨越#wrapper整個寬度，從而不斷斜面中心。寬度大約500px將解決這些問題。

如果你想中心主導航，而不是導航，您應該刪除它的float:left;並給它一個固定的寬度和margin: auto;

來源

2011-12-05 05:33:03

保證金自動夢魘

回答

相關問題