CSS textsize & padding

Question

나는 모두 똑같아 야하는 버튼이 있습니다.

1에는 "Anmäl"이라는 단어가 포함되어 있고 다른 하나에는 "정보"가 들어 있습니다. 이렇게하면 더 긴 단어가있는 버튼이 생기고 나는 그것을 원하지 않습니다!

단어가 다른데도 버튼이 똑같아 보이기를 바랍니다.

나는 더 크게 만들기 위해 패딩을 사용하고 있지만 "폭"을 시도했지만 작동하지 않습니다.

어떤 도움을 주실 수 있나요?

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를 사용하는 것이 가장 좋습니다하는 realworld 시나리오에서, 데이터베이스에서 올 수있는 버튼 텍스트 (또는 다른 동적 소스)가 버튼의 너비보다 길면 버튼을 더 이상 같은 폭이 아니더라도 안전하게 수용 할 수 있습니다.

Answer 2

"채우기 및 왼쪽 여백" 및 "표시 : 인라인 블록"왼쪽 채우기 대신 "text-align : center"사용