HTML Navigationsleiste strecken?

3 Antworten

Recht simpel:

Füge bei #navi li folgendes zu:

    margin-right: 5px;

Mit der Zahl musst nach belieben spielen.

Aber prüf deinen Quellcode mal. Da sind etliche Fehler drin.

Woher ich das weiß:Hobby

Versuch mal in container das hier einzufügen

margin-left: 2em

Margin-left ist nicht gut...
Grund: Die Linksbündigkeit geht verloren weil es eingerückt wird.
Daher mein Vorschlag mit "margin-right" :-)

1

hat nicht viel gebracht.

0

Ok nein nicht bei Container sondern bei #navi a {

0
@regtnichtauf

Oder schau dir mal Flex Box an. Ziemlich interessant und modern. Wird von den meisten Frameworks benutzt.

0

ich habe Deinen gruseligen Code mal repariert:

<!doctype html>
<title>X</title>
<style>
body {
  background:#d9d9d9
}
.container {
  font-family: Verdana,sans-serif;
  font-size: 1em;
}

#navi {
  list-style-type: none;
}

#navi li {
  display:inline-block;
}
#navi a {
    display: block;
    padding: 5px;
    line-height: 1.5em;
    color: #000000;
    border:2px solid #024c68;
    text-decoration:none;
}

#navi a:hover {
    background: #56585b;
    color: #000;
}

div.a {
   text-align: center;
   text-decoration:underline
}

</style>
<div class="a">
<h1>XXXXXXXXXXXXXXXXXX</h1>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<div class="container">
    <ul id="navi">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
    </ul>
</div>

Alex

Danke, ist für die Schule und wir lernen nichts darüber sondern sollen uns selber schlau machen und uns alles selber beibringen.

0
@EinAlexander

Die einzelne Buttons sind immernoch alle direkt nebeneinander geklebt. Kann man sie irgendwie auf eine ganze Zeile aufteilen? Dass links und rechts immer der gleiche Abstand ist?

0
@regtnichtauf
Die einzelne Buttons sind immernoch alle direkt nebeneinander geklebt. 

Was meinst Du mit "nebeneinander geklebt"? Bei mir sind da Abstände zwischen den Buttons.

0
@EinAlexander

Ja schon, aber nur wenige pixel. ich will, dass sie über die gesamte seite (von links nach rechts) aufgeteilt sind. Also zentral in der mitte mit mehr abstand zwischen drin

0

Was möchtest Du wissen?