帶有集中徽標的導航欄

所以我在這裏和網絡上看到了這個問題的幾個答案，但我似乎無法讓它爲我工作。帶有集中徽標的導航欄

這是第一次編碼任何超出基礎知識的東西（而且我只有一週的時間去完成一個課程）。我試過在中間使用兩個ul的div，但一個ul的徽標圖像作爲li似乎讓我最接近。我的問題是，雖然徽標實際上是居中，但我無法讓其他li's以其爲中心，同時讓整個導航欄本身以頁面爲中心。該網站也將不得不responsive（我知道的另一個問題，但我不想誇大我的代碼與解決方案，將與responsive design不兼容）。我也不確定鋤頭是否讓標識和其他標識垂直居中。我試過'vertical-align: middle'但沒有任何成功。非常感謝您的幫助。

這是我的HTML。

<body> 
<div class="header"> 
    <div class="nav"> 
      <ul> 
       <li class="navright"><a href="#">HOME</a></li> 
       <li class="navright"><a href="#">MENU</a></li> 
       <li id="logo"><a href="#"><img src="Images/pantry logo.png" width="536" height="348"/></a></li> 
       <li class="navleft"><a href="#">CONTACT</a></li> 
       <li class="navleft"><a href="#">ABOUT</a></li> 
      </ul> 
     </div> 
    </div>

和CSS。

.header { 
    width: 960px; 
    height: 200px; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    } 

div ul li{ 
    display: inline-block; 
    padding: 60px 70px 40px 0; 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 18px; 
    color: #4f4d4b; 
    text-decoration: none; 
    list-style: none; 
    } 

div ul li a { 
    list-style: none; 
    text-decoration: none; 
    color: #4f4d4b; 
    } 

.nav ul li a:visited { 
    text-decoration: none; 
    color: #4f4d4b; 
    } 

#logo a img { 
    width: 250px; 
    height: auto; 
    position: absolute; 
    left: 50%; 
    margin-left: -125px; 
    display: inline-block; 
    }

您可以去網站 [here]。

來源

2014-03-01 tfhall4

你爲什麼要使用列表標籤...名單建立一個下拉菜單時，才真正屬於在頭... – Wilf

這僅僅是我看到大多數人創建一個導航欄。如果你有更好的解決方案，我全都是耳朵。 – tfhall4

我不會在主導航欄中添加徽標。將它放在導航之外，除非你有某種奇怪的要求。 – innerurge1

不知道你爲什麼在菜單中使用標誌。您可以使用position屬性將其置於中心。使用您當前的結構響應版本也很困難。

對於桌面版，在你的CSS

.nav ul li:nth-child(3){ 
    width:250px; 
}

這將創建一個適當的結構中添加以下代碼。但我會建議，不要使用當前結構來標識中心。與您的菜單分開的徽標，並將其放置在單獨的div中並使用職位屬性進行定位。

來源

2014-03-01 04:34:03

這裏是更新小提琴http://jsfiddle.net/JtfBP/

#logo { 
    height: 60px; 
    padding: 0; 
    width: 250px; 
}

來源

2014-03-01 04:38:43

可以使頭背景的標誌來代替，而不是讓它重複？

.header { 
    width: 965px; 
    height: 200px; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    background:url('Images/pantry logo.png') center; 
    }

使用單獨的div層，而不是一個UL列表，利用同一div類（div.navigator）具有相同的高度標題，然後在你的CSS使用display:float和float: left。

div.navigator { 
    list-style: none; 
    text-decoration: none; 
    width: 192px; 
    height: 200px; 
    padding: 60px 70px 40px 0; 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 18px; 
    color: #4f4d4b; 
    text-decoration: none; 
    display: float; 
    float: left; 
    }

所以你的頭代碼現在：

<div class="header"> 
    <div class="nav"><a href="#">HOME</a></div> 
    <div class="nav"><a href="#">MENU</a></div> 
    <div class="nav"></div> 
    <div class="nav"><a href="#">CONTACT</a></div> 
    <div class="nav"><a href="#">ABOUT</a></div> 
</div>

來源

2014-03-01 04:46:20 user3364528

帶有集中徽標的導航欄

回答

相關問題