lima-city: Webhosting, Domains und Cloud
1 Pluspunkt 0 Minuspunkte

Ich habe dieses HTML aber die Punkte der unordered list werden nebeneinander angezeigt statt untereinander.

<style>
.nav { 
  width: 200px;
  //float: left; 
}

.nav li {
  list-style-type: none;
  float: left;
}

.container {
  width: 600px;
  margin: auto;
  margin-top: 0;
}
</style>

<div class="nav">
  <ul>
    <li>Home</li>
    <li>Work</li>
    <li>Contact</li>
  </ul>
</div>

<div class="container">
Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum do  lor sit amet consectetuer lacus.
</div>

Wie mache ich die 3 Menüpunkte untereinander?

von  

2 Antworten

2 Pluspunkte 0 Minuspunkte

Du musst das "float: left" vom li-Element entfernen und zum nav-Element hinzufügen.

.nav {
  width: 200px;
  float: left;
}

.nav li {
  list-style-type: none;
}

.container {
  width: 600px;
  margin: auto;
  margin-top: 0;
}

Hier eine Demo.

von (397 Punkte)  
0 Pluspunkte 0 Minuspunkte

Hier ist ein Beispiel.

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Work</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <p>Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus.</p>
</div>

JSFiddle

von  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Beiträge bewerten
  • Inhalte bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft. Unser Ziel: Guter Inhalt. Für alle.

2.3k Fragen

2.8k Antworten

260 Kommentare

12 Nutzer