Justiertes CSS-Menü funktioniert nicht ohne Zeilenumbrüche dazwischen

Lesezeit: 4 Minuten

Benutzer-Avatar
Mike

Ich entwerfe eine benutzerdefinierte WordPress-Vorlage für einige Freunde und möchte ein horizontal ausgerichtetes Hauptmenü. Alles wäre in Ordnung, außer dass wp_page_menu die Listenelemente alle in einer Zeile ausgibt, was (nach viel Kopfkratzen) die Formatierung zu brechen scheint und alle Leerzeichen zwischen den Elementen entfernt. Zum Beispiel die folgenden Ausgänge 1, 2 und 3 beabstandet und dann 456 alle zusammen. (Getestet in Safari, Firefox und Chrome, alle auf Mac.)

<style>

.menu {
    text-align: justify;
    width: 700px;
    margin: 10px;
}

.menu * {
    display: inline;
}

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

</style>

<div class="menu">
    <ul>
        <li><a href="http://localhost/">1</a></li>
        <li><a href="http://localhost/">2</a></li>
        <li><a href="http://localhost/">3</a></li>
        <li><a href="http://localhost/">4</a></li><li><a href="http://localhost/">5</a></li><li><a href="http://localhost/">6</a></li>
    </ul>
    <span></span>
</div>

Ich habe bereits eine benutzerdefinierte Funktion, die die Ausgabe von wp_page_menu bearbeitet, um die Spanne nach dem ul hinzuzufügen. Ich denke, das Einfachste wäre, diese Funktion zu erweitern, um auch die Zeilenumbrüche einzufügen, aber wenn jemand andere Ideen hat , oder mir sagen können, warum das passiert (besonders das!), das wäre großartig.

BEARBEITEN:

Habe es jetzt behoben, indem ich eine Funktion hinzugefügt habe, die ein Leerzeichen in den HTML-Code einfügt (Code unten, wenn es jemanden interessiert oder wenn jemand in Zukunft darauf stößt). Scheint, das war alles, was nötig war! Wäre immer noch daran interessiert zu hören, ob mir jemand sagen kann, warum dies erforderlich ist.

// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
    return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');

Um Ihre Frage zu beantworten, so funktioniert xHTML. Wenn Sie Folgendes haben:

<a href="#">test</a><a href="#">test1</a>

Das würde sich als zeigen

testtest1

Und wenn Sie Folgendes haben:

<a href="#">test</a> <a href="#">test1</a>

Das würde sich als zeigen

test test1

Jetzt funktioniert die gleiche Logik für <li> Elemente sowie verschiedene andere Selektoren wie z <img> Selektoren.

Hatten Sie eine Kopfzeile mit drei Bildern in einer Zeile, aber als Sie dies versuchten:

 <img src="#" />
 <img src="#" />
 <img src="#" />

Dadurch wird ein Leerzeichen eingefügt (&nbsp;) nach jedem Bild, während dies nicht der Fall wäre, wenn Sie sie in einer Reihe hätten.

Ihre Funktion erfüllt genau das, was Sie wollten. Sie hätten es auch mit Javascript oder CSS machen können, aber Ihre Lösung ist besser. Nur falls Sie neugierig sind, hier ist, wie man es mit CSS macht:

.menu li:before {
    content:' ';
}

Hoffe das hat geholfen.

Anstelle von display:inline versuchen Sie, Ihre Liste nach links zu schweben. dann vielleicht:

nein:

.menu * {
   display: inline;
}

stattdessen

.menu li{
   float:left;
   padding:0 5px;
   list-style:none;
}

Ich denke, ich habe es irgendwie mit den anderen Sachen verschönert, aber probier es aus!

  • Danke für den Vorschlag, aber das Schweben nach links zerquetscht sie alle auf der linken Seite, anstatt sie auszubreiten. (Und ich habe bereits eine Menge anderer Formatierungen, ich habe sie hier nur aus Gründen der Übersichtlichkeit entfernt.)

    – Mike

    11. August 2010 um 22:42 Uhr

  • Sie müssen dem div.menu eine Breite geben und dann links und/oder rechts von Ihren li Ränder oder Polsterung geben. Sie können auch verrückt werden und dem div.menu einen Container hinzufügen, nennen wir ihn div.menu-container und geben diesem ein Textausrichtungszentrum, dann geben Sie dem div.menu einen Rand: 0 auto; und eine Breite von sagen wir 700px und text-align:left; zum beispiel. Dadurch erhalten Sie ein schwebendes Menü in der Mitte in IE und Firefox/Webkit

    – mraaroncruz

    14. August 2010 um 8:10 Uhr

Wenn ich es richtig verstehe – was Sie wirklich brauchen, ist ein tabellarisches Layout. Versuchen Sie, dies zum CSS hinzuzufügen:

.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }

Sie könnten das li-Tag einfach ganz weglassen und sie einfach zu divs mit demselben Klassennamen machen.

1368360cookie-checkJustiertes CSS-Menü funktioniert nicht ohne Zeilenumbrüche dazwischen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy