CSS 패딩을 사용하여 동일한 너비의 많은 버튼을 만들 수 있습니다.

Question

패딩을 사용하여 CSS로 버튼을 만들려고했습니다.

HTML : (2 버튼)

<link rel="stylesheet" type="text/css" href="css/style-login.css" /> 
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.0.3.css" /> 

<div class="omb_login"> 
    <div class="omb_socialButtons"> 
     <button class="btnfb"> 
      <i class=" fa fa-facebook" data-size="icon" data-scope="public_profile,email" onlogin="checkLoginState();"></i> 
       Login With Facebook 
     </button> 
     <button class="btngoogle"> 
      <i class="fa fa-google" data-size="icon"></i> 
       <a href="<?php echo $google; ?>"> 
        Login With Google 
       </a> 
     </button> 
    </div> 
</div> 

//style-login.css 
/*Style Facebook Login */ 
.omb_login { 
text-align: center; 
line-height: 300%; 
color: white; 
display: block; 
} 

.btnfb { 
-moz-box-shadow:inset 0px 1px 0px 0px #88accb; 
-webkit-box-shadow:inset 0px 1px 0px 0px #88accb; 
box-shadow:inset 0px 1px 0px 0px #88accb; 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4189c4', endColorstr='#3975a8',GradientType=0); 
background-color:#4189c4; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
border-radius:3px; 
border:1px solid #2e6697; 
display:inline-block; 
cursor:pointer; 
color:#ffffff; 
font-family:Verdana; 
font-size:14px; 
font-weight:bold; 
padding:0px 55px; 
text-decoration:none; 
text-shadow:0px 0.1px 0px #FFFFFF; 
} 

.fa-facebook { // Symbol Facebook 
margin-right:12px; 
} 

.btngoogle { 
-moz-box-shadow:inset 0px 1px 0px 0px #F8A088; 
-webkit-box-shadow:inset 0px 1px 0px 0px #F8A088; 
box-shadow:inset 0px 1px 0px 0px #f8a088; 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb5d37', endColorstr='#dc5835',GradientType=0); 
background-color:#eb5d37; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
border-radius:3px; 
border:1px solid #bb4a2b; 
display:inline-block; 
cursor:pointer; 
color:#ffffff; 
font-family:Verdana; 
font-size:14px; 
font-weight:bold; 
padding:0px 64px; 
text-decoration:none; 
text-shadow:0px 0.1px 0px #FFFFFF; 
margin-top:10px; 
} 

.fa-google { // Symbol Google 
margin-right:12px; 
} 

결과 :

그것은 동일 하 (폭 FB & 구글은) 이미 패딩을 변경하고 여전히 동일하지 않았다.

너비와 높이가 다른 패딩을 사용하여 동일한 너비의 버튼을 만들거나 양쪽 정렬 할 수 있습니까?

죄송합니다. CSS가 좋지 않아서 미안합니까?

Answer 1

글자의 길이가 다르기 때문에 두 개의 버튼이 똑같이 보이지 않을 것입니다. 그것은 논리적입니다. 원하는 경우 아이콘을 정렬 할 수 있습니다.

아이콘을 단추 텍스트와 독립적으로 유지해야하므로 아이콘에 position:absolute을 사용해야합니다.

는

.omb_login { 
 
text-align: center; 
 
line-height: 300%; 
 
color: white; 
 
display: block; 
 
} 
 

 
.btnfb { 
 
-moz-box-shadow:inset 0px 1px 0px 0px #88accb; 
 
-webkit-box-shadow:inset 0px 1px 0px 0px #88accb; 
 
box-shadow:inset 0px 1px 0px 0px #88accb; 
 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4189c4', endColorstr='#3975a8',GradientType=0); 
 
background-color:#4189c4; 
 
-moz-border-radius:3px; 
 
-webkit-border-radius:3px; 
 
border-radius:3px; 
 
border:1px solid #2e6697; 
 
display:block; 
 
cursor:pointer; 
 
color:#ffffff; 
 
font-family:Verdana; 
 
font-size:14px; 
 
font-weight:bold; 
 
padding:10px 0; 
 
width:300px; 
 
text-decoration:none; 
 
text-shadow:0px 0.1px 0px #FFFFFF; 
 
position:relative; 
 
} 
 

 
.fa-facebook { 
 
position:absolute; 
 
left:50px; 
 
top:12px; 
 
} 
 

 
.btngoogle { 
 
-moz-box-shadow:inset 0px 1px 0px 0px #F8A088; 
 
-webkit-box-shadow:inset 0px 1px 0px 0px #F8A088; 
 
box-shadow:inset 0px 1px 0px 0px #f8a088; 
 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb5d37', endColorstr='#dc5835',GradientType=0); 
 
background-color:#eb5d37; 
 
-moz-border-radius:3px; 
 
-webkit-border-radius:3px; 
 
border-radius:3px; 
 
border:1px solid #bb4a2b; 
 
display:block; 
 
cursor:pointer; 
 
color:#ffffff; 
 
font-family:Verdana; 
 
font-size:14px; 
 
font-weight:bold; 
 
padding:10px 0; 
 
width:300px; 
 
text-decoration:none; 
 
text-shadow:0px 0.1px 0px #FFFFFF; 
 
margin-top:10px; 
 
position:relative; 
 
} 
 

 
.fa-google { 
 
position:absolute; 
 
left:50px; 
 
top:12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="omb_login"> 
 
    <div class="omb_socialButtons"> 
 
     <button class="btnfb"> 
 
      <i class=" fa fa-facebook" data-size="icon" data-scope="public_profile,email" onlogin="checkLoginState();"></i> 
 
       Login With Facebook 
 
     </button> 
 
     <button class="btngoogle"> 
 
      <i class="fa fa-google" data-size="icon"></i> 
 
       <a href="<?php echo $google; ?>"> 
 
        Login With Google 
 
       </a> 
 
     </button> 
 
    </div> 
 
</div>

Answer 2

<style> button {display:block; min-width: 300px;} </style>

<div> 
<button> Login with facebook</button> 
<button> Login with google+</button> 
<button> ?</button> 
</div> 

이것은 당신이 어떤 버튼 구성 요소에 최소 폭을 추가하는 방법입니다 아래 니펫을보고 난 n 귀하의 응용 프로그램과 물음표가있는 단추에서도 볼 수 있듯이 폭은 다른 모든 것과 동일합니다.

텍스트가 전체 버튼의 최소 너비 인 300px 이상이되면이 ofcoz가 변경되어 더 많은 텍스트가 포함 된 버튼이 텍스트와 함께 펼쳐집니다. 당신의 .btngoogle 및 .btnfb 클래스에 대한

최소 폭을 추가하고 그것을 때문에 버튼의 텍스트 내용의 폭이 동일 은어 button.You의 내용이 무엇인지에 따라 값

.btngoogle {min-width:300px;} 

.btnfb { min-width:300px; }