css - 使用 bootstrap css 调整元素 css 元素

Question

在我的标题中，我添加了三个元素。箭头、fb 图标、twitter 图标。

fiddle :Fiddle

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="email-input navbar-left">
        <div id="error-msg" class="help-block">             
                    </div>
                </div>
                <p class="navbar-text navbar-right">
                    Login
                    <i class="fa fa-play"></i>
                    <i class="fa fa-facebook-square fa-2x"></i>
                    <i class="fa fa-twitter-square fa-2x"></i>
                </p>
            </div>

问题是 Login 文本和 Arrow (>) 没有在标题中间对齐。

我试着改变他们的上下边距和填充但没有改变。感谢您的帮助。

Answer 1

在css中添加类:

.text {
        float: left;
        margin: 4px;
    }

然后像这样用箭头包裹您的登录文本:

<span class="a">Login <i class="fa fa-play"></i></span>