CSS textsize & padding

Question

Ich habe einige Tasten, die alle gleich aussehen sollten.

1 enthält das Wort "Anmäl" und das andere enthält "Information". Dies führt dazu, dass der Button mit dem längeren Wort größer ist und das will ich nicht!

Ich möchte die Schaltflächen gleich aussehen, obwohl die Wörter unterschiedlich lang sind.

Ich verwende Padding, um sie größer zu machen, ich habe "Breite" versucht, aber es funktioniert nicht.

jede Hilfe ist willkommen!

CSS:

.startLink { 
    padding: 20px; 
    padding-left: 90px; 
    padding-right: 90px; 
    color: white; 
    background: #8d68dc; 
    border-radius: 5px; 
    font-size: 16px; 
    box-shadow: 0px 5px 10px #000; 
    webkit-transition: all 200ms ease-in; 
    -moz-transition: all 200ms ease-in; 
    -o-transition: all 200ms ease-in; 
    -ms-transition: all 200ms ease-in; 
    transition: all 200ms ease-in;; 
} 

HTML:

<a href="index.php?anmal" class="startLink">Anmäl</a> 

<a href="index.php?info" class="startLink">Information</a> 

Answer 1

width ist die Antwort, aber es funktioniert nicht für Sie diese Links sind derzeit Inline-Elemente, die nicht explizite Breite empfangen kann.

Geben Sie ihnen inline-block oder block für ihre display Eigenschaft, und Sie können dann width verwenden.

Da sie die gleiche Breite haben, nur für eine Breite prall, die beide bequem aufnimmt. Hier können Sie zum Beispiel die Schaltflächen innerhalb eines Absatzes mit der gleichen Breite zentrieren.

HTML

<p id='btns'> 
    <a href="index.php?anmal" class="startLink">Anmäl</a> 
    <a href="index.php?info" class="startLink">Information</a> 
</p> 

CSS

#btns { text-align: center; } 
.startLink { 
    display: inline-block; 
    margin: 0 .65rem; 
    background: red; 
    padding: 1em; 
    min-width: 200px; 
} 

Es ist am besten min-width zu verwenden, anstatt width, so dass, falls die Schaltfläche Text (der kann in einem realen Welt Szenario, kommt aus einer Datenbank oder eine andere dynamische Quelle) ist länger als die Breite der Schaltfläche erlaubt, wird sicher erweitert, um sie anzupassen (obwohl dies bedeutet, dass Ihre Schaltflächen nicht mehr die gleiche Breite haben.)

Answer 2

verwenden Sie "text-align: center" statt linkes Padding und rechtes Padding mit "min-width" und "display: inline-block"