Grösse der Klickfläche <a> an Elternelement anpassen

Diskutiere Grösse der Klickfläche <a> an Elternelement anpassen im CSS Forum im Bereich Programmierung; Hallo Ihr Lieben, erst mal vorweg: ich bin Anfänger (also bitte Nachsicht mit mir 🤪) und arbeite an einer Navigationsleiste, die ungefähr im...
P

Pippalina

New member
Dabei seit
02.11.2020
Beiträge
1
Hallo Ihr Lieben,

erst mal vorweg: ich bin Anfänger (also bitte Nachsicht mit mir 🤪) und arbeite an einer Navigationsleiste, die ungefähr im oberen drittel mittels Flexbox, von links nach rechts, platziert ist.
Ziel: Ich würde gerne <ul>, <li> und <a> größentechnisch an die Breite und Höhe des Elternelements <nav> anpassen. Bei <ul> und <li> geht das mit meiner bisherigen Programmierung.
Problem: Die Klickfläche von <a> ist größer als <li> und der Rest. Komme auch nicht drauf, wie ich die anpassen kann.
ERGO: Hiiiiiiiiiilfe!

Ist da draußen irgendein Super-Brain, welches mir helfen kann?😁

Hier mal mein Code (reicht der?):

header nav {
width: 100%;
height: 10rem;
top: calc(30rem - 33%); /*Gibt es hier eine elegantere Methode?*/
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
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;
/*border: 2px solid blue;*/
}

header nav ul li {
max-width: inherit; /*Anpassung an Breite des Elternelements; ok*/
height: inherit;
margin: auto;
display: inline; /*Positionierung nebeneinander*/
/*border: 2px solid yellow;*/
}
header nav ul li a {
display: inline-block;
height: 100%; /*Wie erwirke ich, dass der Text mit in das Zentrum rutscht? Text-align funktioniert nicht*/
font-size: 1.4rem;
font-weight: bold;
white-space: nowrap;
text-decoration: none;
border: 2px solid yellow
}

LG Pippa
 
Thema:

Grösse der Klickfläche <a> an Elternelement anpassen

Oben