Sie denken, das Zentrieren einer Menü-Navbar ist einfach?

Question

Ich versuche, HTML5 und CSS3 zu verwenden. Diese Menü-Navigationsleiste kann nicht auf meiner hoffentlich responsiven Website zentriert werden.

nav ul, 
 
nav ol { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
#mainav, 
 
#breadcrumb, 
 
.sidebar nav { 
 
    line-height: normal; 
 
} 
 

 
#mainav .drop::after, 
 
#mainav li li .drop::after, 
 
#breadcrumb li a::after, 
 
.sidebar nav a::after { 
 
    position: absolute; 
 
    font-family: "FontAwesome"; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
} 
 

 

 
/* Top Navigation */ 
 

 
#mainav {} 
 

 
#mainav ul {} 
 

 
#mainav ul ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    width: 160px; 
 
    text-align: left; 
 
} 
 

 
#mainav ul ul ul { 
 
    left: 160px; 
 
    top: 0; 
 
} 
 

 
#mainav li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 10; 
 
    text-transform: uppercase; 
 
} 
 

 
#mainav li:last-child { 
 
    margin-right: 0; 
 
} 
 

 
#mainav li li { 
 
    width: 100%; 
 
    margin: 0; 
 
    text-transform: none; 
 
} 
 

 
#mainav ul.clear { 
 
    border: solid; 
 
    border-width: 0 0 0 1px; 
 
} 
 

 
#mainav li a { 
 
    display: block; 
 
    padding: 20px; 
 
    border: solid; 
 
    border-width: 0 1px 1px 0; 
 
    border-collapse: collapse; 
 
} 
 

 
#mainav li li a { 
 
    border-width: 0 0 1px 0; 
 
} 
 

 
#mainav li li:first-child a, 
 
#mainav li li:last-child a { 
 
    border-width: 0 0 1px 0; 
 
} 
 

 
#mainav .drop { 
 
    padding-left: 25px; 
 
} 
 

 
#mainav li li a, 
 
#mainav li li .drop { 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px 15px; 
 
}

<div class="wrapper row2"> 
 
    <nav id="mainav" class="hoc clear"> 
 
    <ul class="clear"> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a class="drop" href="#">Search properties</a> 
 
     <ul> 
 
      <li><a href="search.html">Search properties</a></li> 
 
      <li><a href="tips.html">Tips for parents</a></li> 
 
     </ul> 
 
     <li><a class="drop" href="#">Owners</a> 
 
      <ul> 
 
      <li><a href="register.html">Register & FAQ</a></li> 
 
      <li><a href="login.html">Login</a></li> 
 
      </ul> 
 
     </li> 
 

 
     <li><a href="blog.html">Blog</a></li> 
 
     <li><a href="about.html">About us</a></li> 
 

 
    </ul> 
 
    </nav> 
 
</div>

Ich habe so viel Code, der das System hier hinzugefügt beschwert, also habe ich aus den letzten Zeilen bearbeiten hatte.

Answer 1

Fügen Sie einfach das, es die ul innerhalb des nav Elements zentriert:

#mainav { 
    text-align: center; 
} 

#mainav ul { 
    display: inline-block; 
} 

Plus Ich tauschte ein </li> mit einem </ul>-Tag am Ende des Untermenü - falsche Reihenfolge.

nav ul, 
 
nav ol { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
#mainav, 
 
#breadcrumb, 
 
.sidebar nav { 
 
    line-height: normal; 
 
} 
 

 
#mainav .drop::after, 
 
#mainav li li .drop::after, 
 
#breadcrumb li a::after, 
 
.sidebar nav a::after { 
 
    position: absolute; 
 
    font-family: "FontAwesome"; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
} 
 

 

 
/* Top Navigation */ 
 

 
#mainav { 
 
text-align: center; 
 
} 
 

 
#mainav ul { 
 
display: inline-block; 
 
} 
 

 
#mainav ul ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    width: 160px; 
 
    text-align: left; 
 
} 
 

 
#mainav ul ul ul { 
 
    left: 160px; 
 
    top: 0; 
 
} 
 

 
#mainav li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 10; 
 
    text-transform: uppercase; 
 
} 
 

 
#mainav li:last-child { 
 
    margin-right: 0; 
 
} 
 

 
#mainav li li { 
 
    width: 100%; 
 
    margin: 0; 
 
    text-transform: none; 
 
} 
 

 
#mainav ul.clear { 
 
    border: solid; 
 
    border-width: 0 0 0 1px; 
 
} 
 

 
#mainav li a { 
 
    display: block; 
 
    padding: 20px; 
 
    border: solid; 
 
    border-width: 0 1px 1px 0; 
 
    border-collapse: collapse; 
 
} 
 

 
#mainav li li a { 
 
    border-width: 0 0 1px 0; 
 
} 
 

 
#mainav li li:first-child a, 
 
#mainav li li:last-child a { 
 
    border-width: 0 0 1px 0; 
 
} 
 

 
#mainav .drop { 
 
    padding-left: 25px; 
 
} 
 

 
#mainav li li a, 
 
#mainav li li .drop { 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px 15px; 
 
}

<div class="wrapper row2"> 
 
    <nav id="mainav" class="hoc clear"> 
 
    <ul class="clear"> 
 
     <li class="active"><a href="index.html">Home</a></li> 
 
     <li><a class="drop" href="#">Search properties</a> 
 
     <ul> 
 
      <li><a href="search.html">Search properties</a></li> 
 
      <li><a href="tips.html">Tips for parents</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a class="drop" href="#">Owners</a> 
 
     <ul> 
 
      <li><a href="register.html">Register & FAQ</a></li> 
 
      <li><a href="login.html">Login</a></li> 
 
     </ul> 
 
     </li> 
 

 
     <li><a href="blog.html">Blog</a></li> 
 
     <li><a href="about.html">About us</a></li> 
 

 
    </ul> 
 
    </nav> 
 
</div>