CSS可能使用填充构建多个宽度相同的按钮

gxwragnw 于 2022-12-01 发布在其他

关注(0)|答案(3)|浏览(161)

我试着用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，有什么建议吗？

css

来源：https://stackoverflow.com/questions/38890062/css-possible-build-many-button-with-same-width-using-padding

3条答案

按热度按时间

cmssoen21#

因为文本的长度是不同的，如果不给两个按钮设置相同的宽度，两个按钮看起来不会完全一样。这是合乎逻辑的。但是如果你愿意，你可以对齐图标。
要做到这一点，图标必须独立于按钮文本，因此您需要在图标上使用position:absolute并定位它们。
见下面的片段
第一个

赞(0）回复(0）举报 2022-12-01

6kkfgxo02#

当然你可以这样做，但首先你应该添加display: inline-block和你想要的width到目标按钮，然后添加你的padding。

赞(0）回复(0）举报 2022-12-01

tcbh2hod3#

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

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

这就是如何将最小宽度添加到应用程序中的任何按钮组件，正如您所看到的，即使是带有问号的按钮，其宽度也与所有其他按钮的宽度相等。
如果文本超过了最小宽度（所有按钮的最小宽度为300 px），则此选项将发生变化，包含更多文本的按钮将随文本一起扩展。
在您的.btngoogle和.btnfb类上添加min-width并为其指定值

.btngoogle {min-width:300px;}

.btnfb { min-width:300px; }

赞(0）回复(0）举报 2022-12-01

我来回答

CSS可能使用填充构建多个宽度相同的按钮

3条答案

相关问题

热门标签

最新问答