0
Ich versuche, meine Navbar zu zentrieren, ohne die überschüssige Navbar zu verlieren. Was ich meine ist, dass ich will, dass die Navigationsleiste über den gesamten Bildschirm angezeigt wird, aber den Text in der Navigationsleiste zentriert haben. Ich habe festgestellt, dass wenn ich die Breite der ul {} in der SS zu sagen. 28%, es auf dem Bildschirm zentriert ist. Aber ich möchte es auf 100% halten, damit ich die Navbar über die ganze Spitze habe. Wie kann ich den Text in der Navigationsleiste zentrieren?Zentrierung UL NavBar
ul {
list-style-type: NONE;
margin: auto;
padding: 0;
width: 100%;
background-color: #449DA2;
\t text-align: center;
\t font-size: 15px;
\t height: 100%
\t position: fixed;
\t overflow: auto;
}<!DOCTYPE html>
<html>
<head>
<body bgcolor=black>
<style>
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 24px 30px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: gray;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: White;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li class="dropdown"><a href="#home">Info Page</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">East</a>
<div class="dropdown-content">
<a href="#">Maryland</a>
<a href="#">Massachusetts</a>
<a href="#">New England</a>
<a href="#">New Jersey</a>
<a href="#">Pennsylvania</a>
<a href="#">Virginia</a>
<a href="#">Washington D.C.</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Central</a>
<div class="dropdown-content">
<a href="#">Illinois</a>
<a href="#">Indiana</a>
<a href="#">Michigan</a>
<a href="#">Minnesota</a>
<a href="#">Texas</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">South</a>
<div class="dropdown-content">
<a href="#">Atlanta</a>
<a href="#">Bowling Green</a>
<a href="#">Charleston</a>
<a href="#">Chattanooga</a>
<a href="#">Jackson</a>
<a href="#">Memphis</a>
<a href="#">Miami</a>
<a href="#">Nashville</a>
<a href="#">Panama</a>
<a href="#">Sarasota</a>
<a href="#">Savannah</a>
<a href="#">Tallahassee</a>
<a href="#">WPB</a>
</div>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">West</a>
<div class="dropdown-content">
<a href="#">California</a>
<a href="#">Colorado</a>
<a href="#">New Mexico</a>
<a href="#">Utah</a>
<a href="#">Washington</a>
</div>
</li>
</ul>
</body>
</html>
Erstellen Sie ein jsfiddle/codepen oder aktivieren Sie die Snippet-Funktion in Ihrem Post, während Sie es mit STRG + M bearbeiten, damit wir sehen können, woran wir arbeiten. – ProEvilz
Wickeln Sie den UL in ein DIV und bewegen Sie die meisten Stile von UL nach DIV. Technisch ist es die Hintergrundfarbe, die Sie über den Bildschirm gehen möchten. –
Ich würde Ihnen empfehlen, das zu nehmen, was @Nawed Khan gesagt hat - wickeln Sie Ihr UL in ein Containerelement und verwenden Sie dieses mit dem Display: block/margin; 0 automatischer Trick. Beispiel fiddle: https://jsfiddle.net/deftehsafc/tsv9ddtr/ – defteH