it-swarm.com.de

So strecken Sie eine feste Anzahl horizontaler Navigationselemente gleichmäßig und vollständig über einen bestimmten Container

Ich möchte 6 Navigationselemente gleichmäßig über einen 900px-Container verteilen, mit einem gleichmäßigen Leerraum dazwischen. Zum Beispiel...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

Derzeit ist die beste Methode, die ich finden kann, um dies zu tun, die folgende:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

Das Problem dabei ist zweifach. Erstens rechtfertigt es das nicht wirklich, sondern verteilt die li-Tags gleichmäßig auf dem ul-Tag. Dadurch entsteht ein ungleichmäßiger Leerraum zwischen kleineren Menüelementen wie "HOME" oder "ABOUT" und größeren wie "BASIC SERVICES". .

Das zweite Problem ist, dass das Layout abbricht, wenn ein Navigationselement größer als 150px ist, was SPECIALTY SERVICES ist - obwohl mehr als genug Platz für das gesamte Navigationselement vorhanden ist.

Kann jemand das für mich lösen? Ich habe das Web nach Lösungen durchsucht, und alle scheinen zu kurz zu kommen. CSS/HTML nur wenn möglich ...

Vielen Dank!

UPDATE (29.07.13): Die Verwendung von table-cell ist die beste moderne Möglichkeit, dieses Layout zu implementieren. Siehe die Antwort von felix unten. Das table cell property funktioniert in 94% der Browser derzeit. Sie müssen etwas gegen IE7 und darunter unternehmen, aber ansonsten sollte es in Ordnung sein.

UPDATE (30.07.13): Leider gibt es einen Webkit-Fehler, der sich darauf auswirkt, wenn Sie dieses Layout mit Medienabfragen kombinieren. Im Moment müssen Sie vermeiden, die Eigenschaft 'display' zu ändern. Siehe Webkit Bug.

UPDATE (25.07.14): Es gibt eine bessere Lösung für dieses Problem: Textausrichtung: Rechtfertigen. Dies ist einfacher und Sie vermeiden den Webkit-Fehler.

67
timshutes

Verwenden text-align:justify für den Container funktioniert dies auf diese Weise, unabhängig davon, wie viele Elemente sich in Ihrer Liste befinden (Sie müssen nicht für jedes Listenelement% width berechnen

GEIGE

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

CSS

#nav {
    text-align: justify;
    min-width: 500px;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
}
94
Danield

Dieser funktioniert wirklich. Es bietet außerdem den Vorteil, dass Sie Medienabfragen verwenden können, um den horizontalen Stil auf einfache Weise zu deaktivieren - beispielsweise, wenn Sie sie auf einem Mobiltelefon vertikal stapeln möchten.

HTML

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

​
#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

38
felix

wenn du kannst, benutze flexbox:

<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

jsfiddle: http://jsfiddle.net/RAaJ8/

Die Browserunterstützung ist eigentlich ganz gut (mit Präfixen und anderen üblen Dingen): http://caniuse.com/flexbox

14
trias

Eine ideale Lösung wird:

  1. Automatisch auf die Breite des Navigationscontainers skalieren
  2. Unterstützt eine dynamische Anzahl von Menüpunkten.

Mit einem einfachen Menü ul in einem Container nav können wir eine Lösung erstellen, die die oben genannten Anforderungen erfüllt.

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

Zuerst müssen wir erzwingen, dass ul die volle Breite seines Containers nav hat. Um dies zu erreichen, verwenden wir das :after Pseudo-Element mit width: 100%.

Dies erreicht unser Ziel perfekt, fügt aber dem Pseudo-Element einen nachgestellten Leerraum hinzu. Wir können dieses Leerzeichen in allen Browsern über IE8 entfernen, indem wir line-height von ul auf 0 und Zurücksetzen auf 100% für die untergeordneten Elemente von li. Siehe das folgende Beispiel CodePen und die Lösung:

CSS

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}
7
Anthony DiSanti

Ich habe alles versucht und fand, dass sie wollten. Dies ist die einfachste und flexibelste Lösung, die ich finden konnte (dank alledem für die Inspiration).

HTML

<div id="container">
<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>
</div>

CSS

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

Sie können natürlich die ersten/letzten untergeordneten abgerundeten Enden weglassen, aber ich denke, sie sind echt pur (und Ihr Kunde auch;)

Die Containerbreite begrenzt die horizontale Liste, aber Sie können dies verwerfen und dem UL einfach einen absoluten Wert zuweisen, wenn Sie möchten.

Probieren Sie es aus, wenn Sie möchten ..

http://jsfiddle.net/tobyworth/esehY/1/

3
Astravagrant

Dies sollte es für Sie tun.

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

#nav-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

#nav {
    display: inline;
    height: 87px;
    width: 100%;
}

.nav-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;

}
2
Brian

Dies ist die Art von Dingen, die das CSS-Modell flexbox= korrigiert, da Sie damit festlegen können, dass jedes li den gleichen Anteil der verbleibenden Breite erhält.

1
Neil

Haben Sie versucht, die Li-Breite auf 16% mit einem Spielraum von 0,5% einzustellen?

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

edit: Ich würde die UL auf 100% Breite setzen:

nav ul {Breite: 100%; Margin: 0 Auto; }

1
BJ Safdie

Ich habe so viele verschiedene Dinge ausprobiert und schließlich herausgefunden, dass das, was für mich am besten funktioniert hat, einfach das Hinzufügen von padding-right: 28px;

Ich spielte mit der Polsterung, um die richtige Menge zu erhalten, um die Gegenstände gleichmäßig zu verteilen.

1
Jen
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>

  <div id="container">
    <object>
      <div>
      alpha
      </div>
    </object>
    <object>
      <div>
      beta
      </div>
    </object>
    <object>
      <div>
      charlie
      </div>
    </object>
    <object>
      <div>
      delta
      </div>
    </object>
    <object>
      <div>
      epsilon
      </div>
    </object>
    <object>
      <div>
      foxtrot
      </div>
    </object>
    <span></span>
  </div>
</html>
0
Paul Sweatte

Anstatt die Breite zu definieren, können Sie einfach einen linken Rand auf Ihr Li setzen, damit der Abstand konsistent ist, und nur sicherstellen, dass der Rand (die Ränder) + Li in 900px passen.

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  margin-left: 35px;
}

Hoffe das hilft.

0
TNC