css Ausrichtung gelistete Blöcke

Ich versuche, ein Navigationsmenü für eine einfache HTML/CSS-Website zu erstellen, es verwendet Blöcke und unorganisierte Listen, um Elemente zur Navigation hinzuzufügen.css Ausrichtung gelistete Blöcke

Das Problem ist, dass ich möchte, dass meine Navigation zentriert wird, jetzt schwebt es von links nach rechts, gibt es eine andere Möglichkeit, das gelistete div anders auszurichten, als es nach rechts schweben zu lassen? Ich habe versucht, mit links: 20; aber hat nicht funktioniert, hier ist der Code.

Wie ich sage, brauchen Sie nur, dass etwas nach rechts zu zentrieren, ich mache es schweben nach links, so dass es die Liste richtig organisiert, ohne sie wäre es eine chaotische Liste, versuchen Sie es und Sie ' Ich werde sehen, was ich meine ... Danke für die Hilfe! : D

body { 
 
font-family: Arial; 
 
} 
 

 
#nav { /*indexed so I can see it over a content div.*/ 
 
z-index:0; 
 
} 
 

 
ul { 
 
margin: 0px; 
 
padding: 0px; 
 
list-style: none; 
 
} 
 

 
ul li { 
 
float: left; 
 
width: 8%; 
 
height: 40px; 
 
background-color: #000000; 
 
opacity: 0.8; 
 
line-height: 40px; 
 
text-align: center; 
 
font-size: 90%; 
 
} 
 

 
ul li a { 
 
text-decoration: none; 
 
color: white; 
 
display: block; 
 
} 
 

 
ul li a:hover { 
 
background-color: green; 
 
} 
 

 
ul li ul li{ 
 
display: none; 
 
} 
 

 
ul li:hover ul li { 
 
display: block; 
 
margin-left: 0%; 
 
width: 100%; 
 
background-color: #000000; 
 
}

<div id="nav"> 
 
<ul> 
 
    <li><a href="#">Attractions</a> 
 
     <ul> 
 
      <li><a href="">Our Team</a></li> 
 
      <li><a href="">Camp Sites</a></li> 
 
      <li><a href="">Mission &amp; Vision</a></li> 
 
      <li><a href="">Resources</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Plan Visit</a> 
 
     <ul> 
 
      <li><a href="">Activities</a></li> 
 
      <li><a href="">Parks</a></li> 
 
      <li><a href="">Shops</a></li> 
 
      <li><a href="">Events</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Birthdays</a> 
 
     <ul> 
 
      <li><a href="">Map</a></li> 
 
      <li><a href="">Directions</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 
</div>

Quelle

2017-11-26 Kieran Brown

Meinst du damit, das nav div vollständig auf dem Bildschirm zentriert zu haben? –

Hintergrund und mittlere Div-Position und Skala, wie sie sollten, einen einfachen linearen Hintergrund mit Farbverlauf von W3Schools, aber wollen, dass mein Div die Navigationsleiste enthalten, hier ist das Bild von dem, was ich anstrebe: https://i.imgur.com /pvqt1bm.png –

Dies, glaube ich, gibt das schönste Ergebnis:

#nav { 
    left:40% 
    position:relative; 
}

Wenn den Schwimmer verwenden, seien Sie vorsichtig, es ohne clearfix Hack. Ein Float kann dazu führen, dass Ihre gesamte Website zusammenbricht. Link dafür, hier auch eine Erklärung: https://www.w3schools.com/howto/howto_css_clearfix.asp

Quelle

2017-11-26 02:24:32

Danke, hat gut funktioniert, aber gibt es auch eine Möglichkeit, die Seite nach unten zu verschieben? versucht oben: 5% aber kein Glück –

^Letzter Kommentar kann nicht bearbeitet werden, aber Ihre Lösung hinterlässt auch einen großen Platz auf der rechten Seite:/kann nicht sehen, wo ich falsch gelaufen bin ... Code ist der gleiche, scheint zu ein Problem mit der Breite sein, aber die Breite sieht gut aus für mich .... Auch es bewegt sich herum, wenn der Bildschirm geschrumpft ist, gibt es einen Weg, es fest zu halten, aber bewegen Sie es, als ob es relativ wäre ... vielleicht könnte ich es setzen in einem div, das richtig positioniert war ... Wie auch immer, es gibt einen großen Platz auf der rechten Seite und es mag keine Größenanpassung –

css Ausrichtung gelistete Blöcke

Antwort

Verwandte Themen