• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

horizontale liste

L

logi

Neues Mitglied
hallo leute.

wie kann ich eine horizontale liste mit html erstellen?

eben so, dass die listenpunkte nicht mehr untereinander sondern nebeneinander angezeigt werden. so wie bei google.de
 
HTML: 
<ul class="liste">
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>
</ul>
css (allgemein):
Code: 
ul li { float:left; }
oder
Code: 
.liste li {float:left; }

das müsste eigentlich gehen.
 
hey danke, hat geklappt.

aber jetzt gibts ein neues problem:

die einzelnen listenpunkte haben keine abstände. wie kann ich das beheben?

Hier der Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>*Seiten-Titel*</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<ul class="liste" style="list-style-type:none; "><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li><br></ul>
<hr>
Zum Vergrößern anklicken....
wie man sieht hab ich noch nen horizontalen strich <hr> drinen.
desshalb auch das <br> tag in der liste.
ohne das <br> ist die liste unter dem strich - warum auch immer...
 
ja genau mach beim css einfach aus
Code: 
.liste li {float:left; }
das hier:
Code: 
.liste li
{float:left;
margin: 5px;
}
(ich schreib mal direkt die lösung^^ selber erarbeiten ist zwar immer besser, aber ich bin auch froh, wenn mir direkt jemand die antwort gibt :-) )

achja und noch was:
diesen code:
Code: 
style="list-style-type:none; "
bei deiner liste, kannst du direkt auch in die css datei schreiben, mit:
Code: 
.liste { list-style: none;}
damit hast du dann direkt html auch von css getrennt
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben