需要幫助集中導航欄與徽標內聯

我想中心我的導航欄，但我已嘗試迄今爲止的任何方式結果導航欄不居中或它居中，但鏈接不在一行。我也想保持徽標符合導航欄，但向左浮動。我嘗試添加一個容器類和一個導航標識，但我不認爲它做了什麼。請幫忙！需要幫助集中導航欄與徽標內聯

這裏是我的html：

<DOCTYPE html!> 
    <html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="HCstyle.css"> 
    <title>Hockey Corner</title> 
    </head> 
    <body> 
    <div> 
     <img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo"> 
    </div> 
    <div class="container"> 
     <div id="nav"> 
     <div class="wrap"> 
      <ul> 
      <li><a href="link.html">Our Sponsers</a></li> 
      <li><a href="link.html">Contact Us</a></li> 
      <li><a href="link.html">About Us</a></li> 
      <li><a href="home.html">Home</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </body> 
    </html>

這裏是我的CSS：

img.logo{ 
    float:left; 
    width:10%; 
    padding-left:5%; 
} 
ul{ 
    list-style-type:none; 
    margin:0; 
    padding-left:20px; 
    padding-right:20px; 
    display:inline-block; 
    overflow:hidden; 
    float:right; 
} 
li{ 
    display:inline-block; 
} 
li a{ 
    display:block; 
    color:white; 
    text-align:center; 
    padding:14px 16px; 
    text-decoration:none; 
} 
li a:hover{ 
    background-color:#34495E; 
} 
body{ 
    background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg"); 
    background-size:cover; 
    background-repeat:no-repeat; 
} 
.nav{ 
    float:left; 
    text-align:left; 
} 
.container{ 
    text-align:center 
}

來源

2017-08-09 VSherr

使用flex屬性將解決您的問題。瞭解更多here。

工作代碼：https://codepen.io/Sahero/pen/rzmVjN

來源

2017-08-09 02:06:32 Ofisora

現在，我們的贊助商鏈接在您懸停時不會突出顯示。 – VSherr

請幫幫我！謝謝 – VSherr

當你懸停時，它會被突出顯示。 – Ofisora

你應該改變你的CSS代碼.nav到#nav。

有很多方法可以找到您的標誌。

我想推薦顯示：flex。

你可以找到簡單的flex。

來源

2017-08-09 02:11:02 zynkn

這幾乎是一個部分答案。如果你能用一個小例子來展示你的靈活思想，那會更好。關於CSS更改的第一部分是可以的。 –

@Paul T謝謝您的評論！ – zynkn

需要幫助集中導航欄與徽標內聯

回答

相關問題