Question

我创建了一个jumbotron，左边有一些文本，右边有一些带有glyphicons的文本。虽然左侧的文字与中间垂直对齐，但右侧的文字与字形符号一起位于的jumbotron下方。

以下是HTML代码： -

<div class="jumbotron" >
        <div class="container-fluid text-left" style="padding-left:4px;">

            <p style="color:#f8921e">Text</p>

            <ul style="list-style-type:none ">
                <li><a class="glyph" href="#"> <span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                <li><a class="glyph" href="#"> <span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
            </ul>
        </div>
     </div>

这是CSS代码： -

.jumbotron
    {
        width:100%;
        color: #f8921e;
        top:0;
        padding:20px;
        z-index:9;
        position:fixed;
        height:10%;
        background-color:black;

    }
.glyph
    {
        margin-right:20px;
        font-size:100%;
        color:#f8921e;
        float:right;
        padding-top:10px;
        display:block;
        text-align:center;

    }

Answer 1

检查一下。当您将注销和设置写为无序列表时，它将成为另一个代码块。所以它将它与 p 块中的文本分开。

here

.jumbotron
    {
        width:100%;
        color: #f8921e;
        top:0;
        padding:20px;
        z-index:9;
        position:fixed;
        height:10%;
        background-color:black;

    }
.glyph
    {
        margin-right:30px;
        font-size:100%;
        color:#f8921e;
        float:right;
       
        display:block;
        text-align:center;

    }

<div class="jumbotron" >
        <div class="container-fluid text-left" style="padding-left:4px;">

            <p style="color:#f8921e">Text

            
                <a class="glyph" href="#"> <span class="glyphicon glyphicon-cog"></span> Settings</a>
                <a class="glyph" href="#"> <span class="glyphicon glyphicon-log-out"></span> Logout</a>             
            
            </p>
            
            
            
        </div>
     </div>

如果你想制作导航栏，我不建议这样做，因为这会在你添加东西时引起越来越多的问题。在bootstrap中寻找导航栏，有更简单更好的方法

在jumbotron中垂直对齐glyphicons

1 个答案: