Gibt es eine Möglichkeit, das erweiterte <details>-Element horizontal mit seinem übergeordneten <summary>-Element zu zenHTML

HTML-Programmierer
Guest
 Gibt es eine Möglichkeit, das erweiterte <details>-Element horizontal mit seinem übergeordneten <summary>-Element zu zen

Post by Guest »

Ich versuche, ein -Element zu verwenden, um meiner Navigationsleiste ein Dropdown-Menü hinzuzufügen, da dies eine wirklich schöne und saubere Möglichkeit ist, ohne auf JavaScript zurückzugreifen.
Alles funktioniert wie vorgesehen, aber ich möchte die Dropdown-Optionen so gestalten, dass sie einen kleinen Rahmen (und damit einen Abstand) haben, da der Text sonst über dem Inhalt meiner Website schwebt und dadurch nicht sichtbar wäre . Dabei stoße ich jedoch auf das Problem, dass das erweiterte -Element immer linksbündig mit seinem übergeordneten -Element verbleibt, was bedeutet, dass die Dropdown-Elemente nur nach rechts erweitert werden und nicht Sieht nicht besonders gut aus.
Hier ist ein Minimalbeispiel:

Code: Select all

.nav-item {
padding: 10px;
}

.navbar-nav {
display: flex;
}

.navbar-nav a {
text-decoration: none;
}

.navbar-nav a:hover {
color: #94add7;
}

.dropdownText:hover {
color: #94add7;
}

.dropdownItem {
/* display: none; */
/* width: 100px; */
position: absolute;
margin-top: 10px;
padding: 15px;
border: 1px solid black;
}

.dropdownText {
cursor: pointer;
}

.dropdownToggle details>summary {
list-style: none;
}

.dropdownToggle details>summary::-webkit-details-marker {
display: none;
}

Code: Select all


[url={targetUrl}]Dropdown Item with longer name[/url]






Gibt es eine Möglichkeit, die -Elemente zu erstellen? horizontal zentriert mit dem übergeordneten -Element erweitern, wenn sie unterschiedliche Breiten haben?
Bitte beachten Sie: Ich habe zuvor ein anstelle von Elemente für jedes Navigationsleistenelement, aber nachdem ich viele Dinge ausprobiert hatte, dachte ich über die Möglichkeit nach, dass vielleicht das Der -Ansatz würde es einfacher machen, sie auszurichten ... bisher ohne Erfolg. Das heißt, ich habe keine Präferenz und bin mit beiden Ansätzen einverstanden, solange sie funktionieren.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post