中心標誌導航欄

我已經通過類似的問題進行了搜索，但沒有找到具體解決方案。我正在嘗試讓我的導航欄圍繞我的中心徽標，徽標兩側均有偶數鏈接。但是，如果窗口較小，鏈接應顯示在徽標下方。基本上，我想實現這個頁面的效果：http://www.colbowdesign.com/index.html 中心標誌導航欄

這裏是我到目前爲止的代碼：

HTML

<header> 
      <img src="assets/CK-Square.png" class="logo"> 
      <ul> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Social</a></li> 
      </ul> 
    </header>

CSS

.logo { 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
} 

header li{ 
     display: inline; 
} 

header { 
     width: 100% 
     height: auto; 
     border-style: solid; 
     margin: 0; 
     padding: 0; 
}

我明白任何和所有的反饋/幫幫我！

來源

2013-05-19 Micah

你能某處發佈您運行的代碼？ – kaidez

該網站只是浮動左邊他們兩個和右邊兩個。你可以做同樣的事情，並根據需要使用媒體查詢進行修改。 – Steven

此解決方案基於使用媒體查詢將佈局從小屏幕更改爲桌面。

<header> 
    <h2 id="logo">Logo</h2> 
    <ul class="nav"> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Social</a></li> 
    </ul> 
</header> 


header { 
    width: 90%; 
    margin: 0 auto; 
} 

#logo { 
    text-align: center; 
} 

.nav { 
    text-align: center; 
} 

.nav li { 
    display: inline; 
    margin-right: 1em; 
} 

/* use media query to change the layout */ 
@media (min-width: 768px) { 
    body { 
     background-color: #f2f2f2; 
    } 

    .nav { 
     margin-top: -42px; 
    } 

    .nav li:nth-child(1), .nav li:nth-child(2) { 
     float: left; 
    } 

    .nav li:nth-child(3), .nav li:nth-child(4) { 
     float: right; 
    } 
}

現場觀看http://jsbin.com/arexuq/2/

來源

2013-05-19 06:14:03

非常感謝您的解釋和代碼。當我回來時，我會努力解決這個問題，並讓我知道我是否能夠自己工作！再次感謝！ – Micah

剛剛更新我的代碼，並得到它的工作！再次感謝您的時間和幫助！ – Micah

@米卡這是偉大的彌迦，保持它 –

-2

使用表..

<table><tr> 
    <td><a href="#">Work</a></td> 
    <td><a href="#">About</a></td> 
    <td><img src="assets/CK-Square.png" class="logo"></td> 
    <td><a href="#">Contact</a></td> 
    <td><a href="#">Social</a></td> 
</tr></table>

來源

2013-05-19 03:54:39 matzone

但是當頁面寬度減小時，它應該將徽標移動到中心頂部並保留下面的鏈接。 – Micah

你不應該使用表格。任何看着它的人都會大聲吼叫。菜單不是表格數據。 – Steven

添加li:nth-child你的風格

如果你有四個列表，你可以補充一點：

header li:nth-child(1), header li:nth-child(2) { 
    float: left; 
} 
header li:nth-child(3), header li:nth-child(4) { 
    float: right; 
}

看到jsfiddle

你應該稍微修改它以產生一個有吸引力的出現ance，here

來源

2013-05-19 04:34:45

中心標誌導航欄

回答

相關問題