Legen Sie die Größe des untergeordneten Elements auf einen übergeordneten Wert mit Padding fest

Question

Zunächst möchte ich sagen, dass ich viele ähnliche Fragen in dieser Ausgabe gelesen habe, aber ich konnte nicht finden und beantworten, dass es in meinem Fall funktioniert.

Ich habe folgende html:

a{ 
 
    display: block; 
 
padding: 3px 20px; 
 
clear: both; 
 
font-weight: normal; 
 
line-height: 1.42857143; 
 
color: #333333; 
 
white-space: nowrap; 
 
    }

<ul> 
 
    <li> 
 
     <a> 
 
      <my-directive ng-click="someFunc">My text 1</my-directive> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a ng-click="someFunc">My text 2</a> 
 
    </li> 
 
</ul>

Mein Problem ist, dass die zweite li funktioniert prima, da der Klick auf das ein Element ist, das Polster hat, aber sein Teil der Element. Der erste hat jedoch ein Kindelement, auf das der ng-Klick angewendet wird, und das Element hat aufgrund der Auffüllung nicht die gesamte Höhe und Breite li.

Wie kann ich das beheben? Es ist wichtig, das Padding für das a-Element beizubehalten, aber ich brauche meine Anweisung, um die gesamte Breite und Höhe einschließlich des Padding zu übernehmen. Ich habe versucht, einen negativen Rand für meine Direktive zu verwenden, aber wie erwartet, ist der Text nicht mehr dort, wo er sollte und die Größe hat sich auch nicht geändert.

Irgendwelche Vorschläge?

Answer 1

Meine Annahme ist, dass Sie das ignorierte Padding nicht auf das untergeordnete Element angewendet haben. Auf diese Weise wird der Text an der Stelle platziert, an der er platziert worden wäre, wenn Sie das Padding nicht zuerst angewendet hätten. Sie könnten hierfür padding:inherit verwenden. Sie können es leider (leider) nicht für die negative Marge verwenden. Ein weiterer Punkt ist, dass unbekannte Tags standardmäßig als behandelt werden. Dies kann dazu führen, dass einige Leerstellen an Stellen erscheinen, an denen sie nicht erscheinen sollen, und sie nimmt auch nicht die volle Breite ein.

a 
 
{ 
 
    display:block; 
 
    position:relative; 
 
    padding:3px 20px; 
 
    background-color:blue; 
 
} 
 

 
/* Classes might be a better idea. */ 
 
/* Used to avoid affecting elements outside of a tags. */ 
 
a > my-directive 
 
{ 
 
    display:block; 
 
    margin:-3px -20px; 
 
    padding:3px 20px; 
 
    
 
    background-color:red; 
 
}

<a> 
 
    <my-directive ng-click>My text 1</my-directive> 
 
</a>