Wie kann ich ein horizontales Menü in HTML + CSS * wirklich * rechtfertigen?

Sie finden viele Tutorials zu Menüleisten in HTML, aber für diesen speziellen (obwohl IMHO generischen) Fall habe ich keine vernünftige Lösung gefunden:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

• Es gibt eine unterschiedliche Anzahl von Nur-Text-Menüelementen und das Seitenlayout ist flüssig.
• Der erste Menüpunkt sollte linksbündig sein, der letzte Menüpunkt sollte rechtsbündig sein.
• Die restlichen Elemente sollten in der Menüleiste optimal verteilt sein.
• Die Anzahl variiert, daher besteht keine Möglichkeit, die optimalen Breiten vorab zu berechnen.

Beachten Sie, dass eine TABELLE auch hier nicht funktioniert:

• Wenn Sie alle TDs zentrieren, sind das erste und das letzte Element nicht richtig ausgerichtet.
• Wenn Sie die erste bzw. rechte Ausrichtung nach links und rechts ausrichten. Bei den letzten Elementen ist der Abstand nicht optimal.

Ist es nicht seltsam, dass es keinen offensichtlichen Weg gibt, dies mithilfe von HTML und CSS sauber zu implementieren?

Moderner Ansatz - Flexboxen !

Nun , da CSS3 flexboxes haben bessere Browser - Unterstützung , können einige von uns schließlich mit ihnen beginnen. Fügen Sie einfach zusätzliche Herstellerpräfixe hinzu, um eine bessere Browserabdeckung zu erzielen .

In diesem Fall setzen Sie einfach das übergeordnete Element displayauf flexund ändern dann die justify-contentEigenschaft in entweder space-betweenoderspace-around , um Platz zwischen oder um die untergeordneten Flexbox-Elemente hinzuzufügen.

Verwenden vonjustify-content: space-between - ( Beispiel hier) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

Verwenden vonjustify-content: space-around - (Beispiel hier) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

Am einfachsten ist es, die Linie zum Unterbrechen zu zwingen, indem Sie am Ende der Linie ein Element einfügen, das mehr als den verbleibenden verfügbaren Platz belegt, und es dann ausblenden. Ich habe dies ganz einfach mit einem einfachen spanElement wie dem folgenden erreicht:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

Der gesamte Müll in der #menu spanAuswahl ist (soweit ich festgestellt habe) erforderlich, um den meisten Browsern zu gefallen. Die Breite des spanElements sollte auf 100% erzwungen werden, was zu einem Zeilenumbruch führen sollte, da es aufgrund der display: inline-blockRegel als Inline-Element betrachtet wird . inline-blockAußerdem spankönnen Stilregeln auf Blockebene verwendet werden, bei widthdenen das Element nicht in das Menü passt und das Menü daher einen Zeilenumbruch aufweist.

Sie müssen die Breite natürlich spanan Ihren Anwendungsfall und Ihr Design anpassen, aber ich hoffe, Sie haben eine allgemeine Vorstellung und können sie anpassen.

Ok, diese Lösung funktioniert unter IE6 / 7 nicht, da :before/ nicht unterstützt wird :after, aber:

ul {
  text-align: justify;
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
ul:after {
  content: "";
  margin-left: 100%;
}
li {
  display: inline;
}
a {
  display: inline-block;
}

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
  </ul>
</div>

Der Grund, warum ich das a-Tag als habe, inline-blockist, dass ich nicht möchte, dass die darin enthaltenen Wörter auch gerechtfertigt sind, und dass ich auch keine nicht unterbrechenden Leerzeichen verwenden möchte.

Habe eine Lösung. Funktioniert in FF, IE6, IE7, Webkit usw.

Stellen Sie sicher, dass Sie keine Leerzeichen einfügen, bevor Sie das schließen span.inner. IE6 wird kaputt gehen.

Sie können optional .outereine Breite angeben

.outer {
  text-align: justify;
}
.outer span.finish {
  display: inline-block;
  width: 100%;
}
.outer span.inner {
  display: inline-block;
  white-space: nowrap;
}

<div class="outer">
  <span class="inner">THE MENU ITEMS</span>
  <span class="inner">SHOULD BE</span>
  <span class="inner">JUSTIFIED</span>
  <span class="inner">JUST AS</span>
  <span class="inner">PLAIN TEXT</span>
  <span class="inner">WOULD BE</span>
  <span class="finish"></span>
</div>

Funktioniert mit Opera, Firefox, Chrome und IE

ul {
   display: table;
   margin: 1em auto 0;
   padding: 0;
   text-align: center;
   width: 90%;
}

li {
   display: table-cell;
   border: 1px solid black;
   padding: 0 5px;
}

noch eine andere Lösung. Ich hatte keine Möglichkeit, das HTML wie das Hinzufügen einer angesehenen Klasse usw. anzugehen, also fand ich einen reinen CSS-Weg.

Funktioniert in Chrome, Firefox, Safari. Ich weiß nichts über IE.

Test: http://jsfiddle.net/c2crP/1

ul {
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 200px; 
  text-align: justify; 
  list-style-type: none;
}
ul > li {
  display: inline; 
  text-align: justify; 
}

/* declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn't know where to make a break. */
ul > li:after {
  content: ' '; 
  display: inline;
}

/* notice the 'inline-block'! Otherwise won't work for webkit which puts after pseudo el inside of it's parent instead of after thus shifting also the parent on next line! */
ul > li:last-child:after {
  display: inline-block;
  margin-left: 100%; 
  content: ' ';
}

<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">exposities</a></li>
  <li><a href="#">werk</a></li>
  <li><a href="#">statement</a></li>
  <li><a href="#">contact</a></li>
</ul>

Machen Sie es <p>mit text-align: justify?

Update : Nevermind. Das funktioniert überhaupt nicht, wie ich gedacht hatte.

Update 2 : Funktioniert derzeit in keinem anderen Browser als dem IE, aber CSS3 unterstützt dies in Form vontext-align-last

Für Gecko-basierte Browser habe ich diese Lösung entwickelt. Diese Lösung funktioniert nicht mit WebKit-Browsern (z. B. Chromium, Midori, Epiphany), sie zeigen jedoch nach dem letzten Element noch Leerzeichen an.

Ich habe die Menüleiste in einen begründeten Absatz eingefügt . Das Problem ist, dass die letzte Zeile eines begründeten Absatzes aus offensichtlichen Gründen nicht gerechtfertigt wird. Daher füge ich ein weites unsichtbares Element hinzu (z. B. ein Bild), das garantiert, dass der Absatz mindestens zwei Zeilen lang ist.

Jetzt wird die Menüleiste durch denselben Algorithmus gerechtfertigt, den der Browser zum Ausrichten von einfachem Text verwendet.

Code:

<div style="width:500px; background:#eee;">
 <p style="text-align:justify">
  <a href="#">THE&nbsp;MENU&nbsp;ITEMS</a>
  <a href="#">SHOULD&nbsp;BE</a>
  <a href="#">JUSTIFIED</a>
  <a href="#">JUST&nbsp;AS</a>
  <a href="#">PLAIN&nbsp;TEXT</a>
  <a href="#">WOULD&nbsp;BE</a>
  <img src="/Content/Img/stackoverflow-logo-250.png" width="400" height="0"/>
 </p>
 <p>There's an varying number of text-only menu items and the page layout is fluid.</p>
 <p>The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimal on the menu bar.</p>
 <p>The number is varying,so there's no chance to pre-calculate the optimal widths.</p>
 <p>Note that a TABLE won't work here as well:</p>
 <ul>
  <li>If you center all TDs, the first and the last item aren't aligned correctly.</li>
  <li>If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.</li>
 </ul>
</div>

Bemerkung: Merkst du, dass ich betrogen habe? Um das Leerzeichenelement hinzuzufügen, muss ich die Breite der Menüleiste erraten. Diese Lösung hängt also nicht vollständig von den Regeln ab.

Text ist nur gerechtfertigt, wenn der Satz natürlich einen Zeilenumbruch verursacht. Alles, was Sie tun müssen, ist natürlich einen Zeilenumbruch zu erzwingen und zu verbergen, was in der zweiten Zeile steht:

CSS:

ul {
  text-align: justify;
  width: 400px;
  margin: 0;
  padding: 0;
  height: 1.2em;
  /* forces the height of the ul to one line */
  overflow: hidden;
  /* enforces the single line height */
  list-style-type: none;
  background-color: yellow;
}

ul li {
  display: inline;
}

ul li.break {
  margin-left: 100%;
  /* use e.g. 1000px if your ul has no width */
}

HTML:

<ul>
  <li><a href="/">The</a></li>
  <li><a href="/">quick</a></li>
  <li><a href="/">brown</a></li>
  <li><a href="/">fox</a></li>
  <li class="break">&nbsp;</li>
</ul>

Das li.break-Element muss sich in derselben Zeile wie das letzte Menüelement befinden und Inhalte enthalten (in diesem Fall ein nicht unterbrechendes Leerzeichen). Andernfalls werden in einigen Browsern kleine Elemente angezeigt, wenn es sich nicht in derselben Zeile befindet Zusätzlicher Platz am Ende Ihrer Zeile. Wenn dieser keinen Inhalt enthält, wird er ignoriert und die Zeile ist nicht gerechtfertigt.

Getestet in IE7, IE8, IE9, Chrome, Firefox 4.

Wenn Sie mit Javascript arbeiten möchten, ist dies möglich (dieses Skript basiert auf Mootools).

<script type="text/javascript">//<![CDATA[
    window.addEvent('load', function(){
        var mncontainer = $('main-menu');
        var mncw = mncontainer.getSize().size.x;
        var mnul = mncontainer.getFirst();//UL
        var mnuw = mnul.getSize().size.x;
        var wdif = mncw - mnuw;
        var list = mnul.getChildren(); //get all list items
        //get the remained width (which can be positive or negative)
        //and devided by number of list item and also take out the precision
        var liwd = Math.floor(wdif/list.length);
        var selw, mwd=mncw, tliw=0;
        list.each(function(el){
            var elw = el.getSize().size.x;
            if(elw < mwd){ mwd = elw; selw = el;}
            el.setStyle('width', elw+liwd);
            tliw += el.getSize().size.x;
        });
        var rwidth = mncw-tliw;//get the remain width and set it to item which has smallest width
        if(rwidth>0){
            elw = selw.getSize().size.x;
            selw.setStyle('width', elw+rwidth);
        }
    });
    //]]>
</script>

und die CSS

<style type="text/css">
    #main-menu{
        padding-top:41px;
        width:100%;
        overflow:hidden;
        position:relative;
    }
    ul.menu_tab{
        padding-top:1px;
        height:38px;
        clear:left;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:50%;
        text-align:center;
    }
    ul.menu_tab li{
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        right:50%;
    }
    ul.menu_tab li.item7{
        margin-right:0;
    }
    ul.menu_tab li a, ul.menu_tab li a:visited{
        display:block;
        color:#006A71;
        font-weight:700;
        text-decoration:none;
        padding:0 0 0 10px;
    }
    ul.menu_tab li a span{
        display:block;
        padding:12px 10px 8px 0;
    }
    ul.menu_tab li.active a, ul.menu_tab li a:hover{
        background:url("../images/bg-menutab.gif") repeat-x left top;
        color:#999999;
    }
    ul.menu_tab li.active a span,ul.menu_tab li.active a.visited span, ul.menu_tab li a:hover span{
        background:url("../images/bg-menutab.gif") repeat-x right top;
        color:#999999;
    }
</style>

und das letzte HTML

<div id="main-menu">
    <ul class="menu_tab">
        <li class="item1"><a href="#"><span>Home</span></a></li>
        <li class="item2"><a href="#"><span>The Project</span></a></li>
        <li class="item3"><a href="#"><span>About Grants</span></a></li>
        <li class="item4"><a href="#"><span>Partners</span></a></li>
        <li class="item5"><a href="#"><span>Resources</span></a></li>
        <li class="item6"><a href="#"><span>News</span></a></li>
        <li class="item7"><a href="#"><span>Contact</span></a></li>
    </ul>
</div>

Einfacheres Markup, getestet in Opera, FF, Chrome, IE7, IE8:

<div class="nav">
  <a href="#" class="nav_item">nav item1</a>
  <a href="#" class="nav_item">nav item2</a>
  <a href="#" class="nav_item">nav item3</a>
  <a href="#" class="nav_item">nav item4</a>
  <a href="#" class="nav_item">nav item5</a>
  <a href="#" class="nav_item">nav item6</a>
  <span class="empty"></span>
</div>

und css:

.nav {
  width: 500px;
  height: 1em;
  line-height: 1em;
  text-align: justify;
  overflow: hidden;
  border: 1px dotted gray;
}
.nav_item {
  display: inline-block;
}
.empty {
  display: inline-block;
  width: 100%;
  height: 0;
}

Live Beispiel .

Dies kann perfekt durch einige sorgfältige Messungen und den Selektor für das letzte Kind erreicht werden.

ul li {
margin-right:20px;
}
ul li:last-child {
margin-right:0;
}

Ich kenne die ursprüngliche Frage, in der HTML + CSS angegeben ist, aber es wurde nicht ausdrücklich kein Javascript angegeben ;)

Beim Versuch, das CSS und das Markup so sauber wie möglich und semantisch so aussagekräftig wie möglich zu halten (unter Verwendung eines UL für das Menü), kam ich auf diesen Vorschlag. Wahrscheinlich nicht ideal, aber es kann ein guter Ausgangspunkt sein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
        <title>Kind-of-justified horizontal menu</title>

        <style type="text/css">
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        ul li {
            display: block;
            float: left;
            text-align: center;
        }
        </style>

        <script type="text/javascript">
            setMenu = function() {
                var items = document.getElementById("nav").getElementsByTagName("li");
                var newwidth = 100 / items.length;

                for(var i = 0; i < items.length; i++) {
                    items[i].style.width = newwidth + "%";
                }
            }
        </script>

    </head>

    <body>

        <ul id="nav">
            <li><a href="#">first item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
            <li><a href="#">last item</a></li>
        </ul>

        <script type="text/javascript">
            setMenu();
        </script>

    </body>

</html>