Question

我正在努力让用户可以使用fb等登录我的网站。出于某种原因，文本隐藏在我现有代码中的按钮后面。我不确定是什么问题，因为在我改变按钮的背景并添加社交图标之前，文本过去常常显示在哪里。你能帮忙吗？

以下是相关代码： HTML：

    <a class="alt-sign-in facebook">Login with facebook</a>
    <a class="alt-sign-in google">Login with google</a>
    <a class="alt-sign-in twitter">Login with twitter</a>


    <form>
        <input type="text" name="name" placeholder="name">
        <input type="text" name="email" placeholder="email">
        <input type="submit" name="submit">
    </form>
    <button id="computer-button">Start</button>
</div>

CSS：

    @import url('http://weloveiconfonts.com/api/?family=entypo');
 @import url('http://weloveiconfonts.com/api/?family=zocial');
 html, body {
    height: 100%;
    background: #ddd;
}
.alt-sign-in {
    position: relative;
    display:block;
    height: 40px;
    width: 300px;
    margin: 10px 0px auto auto;
    padding: 5px;
    font: 700 16px/40px'Quattrocento Sans', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    text-align:center;
    line-height: 40px;
    color: #555;
    border-radius: 2px;
    background: linear-gradient(to bottom, white 40%, lightgrey);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    cursor: pointer;
    box-sizing: border-box;
}
.alt-sign-in:before {
    color:white;
    position:relative;
    top: -5px;
    left: -5px;
    display:block;
    box-sizing: border-box;
    height: 40px;
    width: 45px;
    font: 20px/40px entypo;
    text-align: center;
    color: #fff;
    border-radius: 2px 0 0 2px;
}

http://jsfiddle.net/prettysweet/Dv9rC/24/

非常感谢你！

Answer 1

您发布的代码似乎是不完整或旧版本。

但是从你的jsfiddle链接判断，我建议改变以下内容;

.alt-sign-in {
    /* removed: box-sizing: border-box; */
}

.alt-sign-in:before {
    position:absolute;
    top: 5px;
    left: 5px;
}

请参阅http://jsfiddle.net/Dv9rC/27/

Answer 2

我认为你有浮动元素问题。如果你将这些行添加到你的css代码中，那就没关系。

.alt-sign-in.facebook:before {
...
float: left;
}

.alt-sign-in.google:before {
...
float: left;
}

.alt-sign-in.twitter:before {
...
float: left;
}

奖励编辑：添加所有这些代码后，只需将表单标记添加到CSS文档中以获得最高保证金。

form{
 margin-top:15px;   
}

文字从按钮上消失了

2 个答案: