Question

我正在尝试在输入字段之前创建一个带有块图标的登录表单。

@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

#login {
    margin: 50px auto;
    width: 300px;
    background: #999;
    padding: 50px;
}

#login p {
    line-height: 50px;
}

#login p span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 3px;
    text-align: center;
    border: 1px solid #ccc;
    background: #ccc;
    color: #fff;
} 

#login p input { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    padding: 3px; 
    width: 200px; 
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc; 
    background: #fdfdfd;
}

HTML

<div id="login">
       <p><span class="fontawesome-user"></span><input type="text" placeholder="Username"></p>
       <p><span class="fontawesome-lock"></span><input type="password" placeholder="Password"></p>
</div>

不幸的是，我无法将块（span）图标与输入字段精确对齐。我怎么能这样做？感谢

Example

Answer 1

您需要垂直对齐内联块元素，例如：

#login p > * {
    vertical-align:middle;
}

Forked Fiddle

在输入字段上对齐跨度图标块

1 个答案: