我想中心我的导航栏,但我已尝试迄今为止的任何方式结果导航栏不居中或它居中,但链接不在一行。我也想保持徽标符合导航栏,但向左浮动。我尝试添加一个容器类和一个导航标识,但我不认为它做了什么。请帮忙!需要帮助集中导航栏与徽标内联
这里是我的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
}
现在,我们的赞助商链接在您悬停时不会突出显示。 – VSherr
请帮帮我!谢谢 – VSherr
当你悬停时,它会被突出显示。 – Ofisora