Warum ändert sich die Größe meines HTML-Elements nicht?

Question

Ich versuche die Größe meiner 'Senden' Schaltfläche zu ändern, aber sie reagiert nicht. Ich weiß, dass es eine einfache Lösung sein sollte, aber ich bin mir nicht sicher über den genauen Grund, warum das passiert. Ich habe mich gefragt, ob mir jemand helfen könnte. Vielen Dank. Hier

ist die CSS:

.send{ 
    border-radius: 20px; 
    background-color: #00e699; 
    font-weight: bold; 
    color: white; 
    position:relative; 
    width: 80%; 
    height: 80%; 
    top: 50px; 
    left: 32%; 
} 

Hier ist der HTML ist mit dem 'Senden' Taste

<div class="infocard"> 
     <div class = "col-md-12" > 
     <h3 class="theName"></h3> 
     <h3 class="theNum"></h3> 
     <h3 class="theDate"></h3> 

     <input type = "text" name = "Name" size = "30" class = "textBox" ng-model = "input" /> 
     <a href= "" style = "text-decoration: none; color: white;" class = "send" ng-click="passPrompt()">Send Message</a> 
     </div> 
    </div> 

Answer 1

a Tags sind display: inline standardmäßig. Sie müssen display: block oder display: inline hinzufügen, um Breite/Höhe Stile hinzuzufügen.

Answer 2

Fügen Sie einfach als Anzeige

gewünschte

.send{ 
 
    border-radius: 20px; 
 
    background-color: #00e699; 
 
    font-weight: bold; 
 
    color: white; 
 
    position:relative; 
 
    width: 50%; 
 
    height: 80%; 
 
    top: 50px; 
 
    left: 32%; 
 
    display:block; 
 
}

<div class="infocard"> 
 
     <div class = "col-md-12" > 
 
     <h3 class="theName"></h3> 
 
     <h3 class="theNum"></h3> 
 
     <h3 class="theDate"></h3> 
 

 
     <input type = "text" name = "Name" size = "30" class = "textBox" ng-model = "input" /> 
 
     <a href= "" style = "text-decoration: none; color: white;" class = "send" ng-click="passPrompt()">Send Message</a> 
 
     </div> 
 
    </div>