以集中標誌導航

我正在使用動態內容（WordPress），並希望將徽標居中放置在列表中間：http://www.munto.net/queed-v1/。以集中標誌導航

我測試了一下，我的理論是有效的，只要兩邊的物品數量是相同的......但是如果它們不同，它會導致導航混亂。

您可以在http://joshrodgers.com/處看到一個實例。

我做的是讓我的logo成爲背景圖像，並將其集中到我的無序列表中，然後在每個列表項目上設置一個寬度（這樣如果有超長的列表項目，它不會搞亂導航），最後在第三個鏈接之後，我在列表項右側放置了一個200px的邊距（這樣就不會在標識上顯示列表項）......但正如我所說的，如果數字的項目是偶數，如果項目等於奇數，它看起來很有趣。

不知道什麼是最好的辦法做到這一點，所以 - 什麼是解決這個問題的最好方法？

頁代碼：

<html> 
    <head> 
     <title>Josh Rodgers - El Paso, Texas</title> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
     <ul> 
      <li>Home</li> 
      <li>About Us</li> 
      <li class="example">super new lodge</li> 
      <li>Programs</li> 
      <li>Events</li> 
      <li>Contact Us</li> 
      <li>Contact Us</li> 
     </ul> 
    </body> 
</html>

CSS樣式：

/* Reset */ 
@import url("reset.css"); 

body { 
    margin: 0 auto; 
    position: relative; 
    width: 1000px; 
} 

ul { 
    background: #ff0000 url("images/example.jpg") top center no-repeat; 
    height: 200px; 
    margin: 0 auto; 
    text-align: center; 
    width: 1000px; 
} 

li { 
    background: #ffff00; 
    color: #ff0000; 
    display: inline-block; 
    font-size: 20px; 
    padding: 20px 0; 
    position: relative; 
    top: 70px; 
    width: 100px; 
} 

li.example { 
    margin-right: 200px; 
}

*想我會其集成到WordPress之前，在正常的PHP解決方案工作。

感謝，喬希

來源

2012-07-23 Josh Rodgers

從設計的角度來看，我會考慮可能使標識歸屬鏈路。許多網絡用戶習慣於點擊該標誌並將其帶回家。您仍然可以將主頁文本合併到徽標下。

我可能不會使用您的margin-right方法：200px不能覆蓋標識，您在該列表項目之前更改的任何內容都會移動邊距。

最終，我會建議反思將標誌設置爲背景圖像，並使其成爲列表項之一。

來源

2012-07-23 17:53:42 thom

thom ...是的，這最終是太複雜了...我最終走向另一個方向。 – 2013-01-11 22:42:02

以集中標誌導航

回答

相關問題