2017-08-09 42 views
0

我想中心我的导航栏,但我已尝试迄今为止的任何方式结果导航栏不居中或它居中,但链接不在一行。我也想保持徽标符合导航栏,但向左浮动。我尝试添加一个容器类和一个导航标识,但我不认为它做了什么。请帮忙!需要帮助集中导航栏与徽标内联

这里是我的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 
} 

回答

0

你应该改变你的CSS代码.nav到#nav。

有很多方法可以找到您的标志。

我想推荐显示:flex。

你可以找到简单的flex。

+0

这几乎是一个部分答案。如果你能用一个小例子来展示你的灵活思想,那会更好。关于CSS更改的第一部分是可以的。 –

+0

@Paul T谢谢您的评论! – zynkn