0
Ich versuche, meine Navigationsleiste zu zentrieren, aber jeder Weg, den ich bisher versucht habe Ergebnisse entweder mit der Navigationsleiste nicht zentriert oder es ist zentriert, aber die Links sind nicht in einer Linie. Ich möchte auch das Logo in Übereinstimmung mit der Navigationsleiste halten, aber nach links schweben. Ich habe versucht, eine Container-Klasse und eine Nav-ID hinzuzufügen, aber ich glaube, das hat nichts bewirkt. Bitte Hilfe!Brauchen Sie Hilfe Zentrierung Navigationsleiste mit einem Logo inline
Hier ist mein 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>
Und hier ist mein 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
}
Jetzt wird der Link Our Sponsors nicht hervorgehoben, wenn Sie den Mauszeiger darüber bewegen. – VSherr
Bitte helfen Sie mir! Danke – VSherr
Es wird hervorgehoben, wenn Sie den Mauszeiger bewegen. – Ofisora