CSS textsize＆padding

Question

私は同じように見えるべきいくつかのボタンを持っています。

1には「Anmäl」という単語が含まれ、もう1つに「情報」が含まれています。 これは長い単語のボタンが大きくなり、私はそれを望んでいません！

言葉が違うにもかかわらずボタンが同じように見えます。

私はそれらを大きくするためにパディングを使用していますが、私は "幅"を試しましたが、それはうまく動作しません。

ご了承ください。

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が答えですが、それはあなたのために働いていません。

displayプロパティでinline-blockまたはblockを指定すると、widthを使用できます。

同じ幅を持っているのは、両方に快適に適応する幅のためにちょうどぷったりです。ここでは、たとえば、同じ幅の段落内にボタンを中央に配置する方法を示します。

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; 
} 

それは念のために、そうwidthことではなく、min-widthを使用するのが最善ですが、現実世界のシナリオでは、データベースから来るかもしれないボタンのテキスト（または他のダイナミックソース）がボタンの幅よりも長い場合は、それに合わせて安全に拡大します（これは、ボタンが同じ幅ではなくなっても意味があります）。

Answer 2

「左揃え」の代わりに「文章揃え：中央」を使用し、「最小幅」の埋め込みと埋め込み と「表示：インラインブロック」