html - 导航栏元素插入一切正确的 CSS

Question

我有一个 Bootstrap 导航栏。代码:

<div align="center">
    <!-- Static navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div id="nav_list" style="margin-top:30px; float:left;"></div>
            <div id="logo">
                <a href=""><img src="" style="height:50px; margin-top:20px;"></a>
            </div>
            <img id="loading" src="images/loading.gif"
                 style="height:50px;margin-top:20px; display:none">
        </div>
    </div>

我希望图像保持在导航栏的中间，而 nav_list float 在它的左侧。但是现在，当包含 nav_list 时，它会向左浮动，但所有图像都会向右推。

这是CSS:

#nav_list {
    background: url(icon_nav.png) no-repeat left top;
    cursor: pointer;
    height: 27px;
    width: 33px;
    float:left;
    margin-right: 0px !important;
}
#nav_list.active {
    background-position: -33px top;
}

Answer 1

添加:

#nav_list {
    background: url(icon_nav.png) no-repeat left top;
    cursor: pointer;
    height: 27px;
    width: 33px;
    float:left;
    position: absolute; /* <--- */
    text-align: center;
}

工作做得很好。谢谢。