Hallo Ihr Lieben,
erst einmal vorweg, ich bin blutiger Anfänger (also bitte Nachsicht mit mir

) und arbeite gerade an einer Navigationsleiste die ca mittig im Viewport platziert und von rechts nach links mittels Flexbox läuft. <li> habe ich als inline-block und <a> als inline-Element dargestellt, in der Hoffnung ich kann dadurch die Breite und Höhe dieser Elemente an <ul> anpassen.
Die Weite und Breite von <ul> und <li> passen sich automatisch wunderbar an die des Elternelements <nav> an.
Problem: die Klickfläche von <a> ist größer als <ul> und <li> und passt sich überhaupt nicht an, wenn ich beispielsweise "inherit" verwende.
ERGO: Hiiiiiiiiiiilfe
Hier ist mein Code:header nav {
width: 100%;
height: 10rem;
top: calc(30rem - 33%);
background-color:rgba(255, 255, 255, 0.3);
}
header nav ul {
max-width: 1025px;
height: 100%; /*Anpassung an Höhe des Elternelements; ok*/
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: center;
}
header nav ul li {
max-width: inherit; /*Anpassung an Breite des Elternelements; ok*/
height: inherit;
margin: auto;
display: inline; /*Positionierung nebeneinander*/
}
header nav ul li a {
display: inline-block;
height: 100%;
font-size: 1.4rem;
font-weight: bold;
white-space: nowrap;
text-decoration: none;
}
Reicht das als Info?
Ist irgendein Super-Brain da draußen, das mir vielleicht helfen kann?
LG Pippa