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

テキストの長さが違うので、2つのボタンが同じ幅に設定されていても、まったく同じに見えません。論理的です。必要に応じてアイコンを整列させることができます。

これを行うには、アイコンはボタンのテキストとは独立している必要があるため、アイコン上にposition:absoluteを使用して配置する必要があります。

これはあなたがいずれかのボタンの成分Iに最小幅を追加する方法です

.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> 

下のスニペットを参照してくださいあなたのアプリケーションでは、疑問符の付いたボタンでもわかるように、幅は他のすべてのものと同じです。

このテキストは、テキストがすべてのボタンで300px以上の幅になると変更されます。さらに多くのテキストを含むボタンはテキストとともに展開されます。あなたの.btngoogleそして.btnfbクラスの

は最小幅を追加し、それが原因で、ボタンのテキストコンテンツの同じ幅を持ってカントbutton.You上のコンテンツが何であるかに依存する値

.btngoogle {min-width:300px;} 

.btnfb { min-width:300px; }