Ich habe in Kentico 9 ein Menü mit dem Webpart "CSS-Listenmenü" erstellt. Ich habe es mit CSS formatiert und alles war gut, bis ich einen neuen Seitenmenüpunkt hinzugefügt habe. Jetzt passen die Gegenstände nicht mehr in eine einzige Linie im Nav. Da die Länge der Dokumentnamen ungleich ist, möchte ich idealerweise einfach einen Zeilenumbruch um das kaufmännische Und-Zeichen der längeren Titel einfügen. (Ich habe keine Möglichkeit gefunden, einen Zeilenumbruch basierend auf einem bestimmten Zeichen mit CSS einzufügen)Einfügen von Zeilenumbrüchen in Seitennamen, die im CSS-Listenmenü in Kentco verwendet werden 9
Teilen Sie die Breite gleichmäßig zwischen jedem Element <li> über einen Prozentsatz schiebt den ersten Titel in drei Zeilen, lässt große Lücken zwischen den Menüelementen und sieht unattraktiv aus. Zu beachten ist die Hover-Funktion, die die untergeordneten Seiten der ersten Ebene der ersten Seite darunter anzeigt.
Aktuelles Menü Aussehen:
Ich habe keine wesentlichen Änderungen an den Web-Teil und „Zeilenumbruch“ geprüft wird. Hier ist die CSS-Code:
/* Horizontal menu - main menu */
header nav {
text-align: center;
width: 100%; /* Container width is 960px */
background-color: rgb(1, 69, 106);
box-sizing: border-box;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
left: 0;
}
header nav ul li {
display: inline-block;
position: relative;
padding:0;
font-size: 1.15em;
}
header nav ul li a {
text-decoration: none;
border: 10px solid rgb(1, 69, 106);
display: block;
}
header nav ul li a:visited {
color: rgb(234, 161, 23);
}
header nav ul li a:hover,
header nav ul li a:active,
header nav ul li a:focus {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgb(8, 96, 143);
border: 10px solid rgb(8, 96, 143);
}
header nav ul ul {
display: none;
}
header nav ul li:hover ul {
display: block;
background-color: rgb(1, 69, 106);
position: absolute;
width: 100%;
}
header nav ul li ul li {
font-size: 1em;
width: 100%;
z-index: 1;
background-color: rgb(1, 69, 106);
}
header nav ul li ul li a {
border: 5px solid rgb(1, 69, 106);
display: block;
}
header nav ul li ul li a:hover,
header nav ul li ul li a:active,
header nav ul li ul li a:focus {
border: 5px solid rgb(8, 96, 143);
}
header nav ul ul ul li {
display: none;
}