html - 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 和 google 宽度)，已经改变了 padding 但还是不一样。

是否可以使用填充(不使用宽度/高度)或对齐来构建具有相同宽度的按钮？

抱歉，我不擅长 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>