徽标图像隐藏和文本头顶徽标

Question

有人可以看看这个 fiddle http://jsfiddle.net/pkcwtone/1/ 并告诉我为什么我无法将图像完全放入导航中吗？

这是html:

<nav id="mainNavigation" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Responsive navigation -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

            </button>
          <a class="navbar-brand" href="">
            <img src="http://s28.postimg.org/gc8ajkjq5/advance_logo.png" alt=""/>
          </a>   
        </div>
        <div class="clearfix"></div>
        <div class="collapse navbar-collapse" id="navbar-collapse-2">      
            <!-- top navigation-->
            <ul class="nav navbar-nav navbar-left">
              <li>
                <a href="">Home</a>
              </li>
                <li>    
                  <a href="">Accident<br>Management</a>
                </li>
                <li>    
                  <a href="">Approved<br>Manufacturers</a>
                </li>
                  <li>
                    <a href="">Our<br>Services</a>
                </li>
                <li>    
                  <a href="">About<br>Advance</a>
                </li>
                 <li>   
                  <a href="">Contact<br>Us</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">                     
            </ul>
        </div>
    </div>
</nav>

这是css:

#mainNavigation.navbar-default{
  /*background: #f9540a;*/
    background:black;
    width: 100%;
    text-align: center;
    font-family:'Droid Sans', sans-serif;
    font-weight:700;
    font-size:1.2em;
}
#mainNavigation.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}
#mainNavigation .container-fluid{
height:auto;
overflow:auto;
}
.navbar-brand img{
float:left;
}

我一直在玩溢出……用clearfix……用高度……但它看起来很糟糕：S文字覆盖了标志，它不应该（我知道我可以使用填充，但我认为牢记徽标占用的 space 一定是一种更自然的方式），然后，徽标看起来很漂亮！ :S

谁能看出我做错了什么？

干杯:)

Answer 1

看起来问题出在这里：

#mainNavigation.navbar-header {

上面的 css 正在寻找的是一个 div id mainNavigation and class nav-header 但是您在它们之间添加 space，它会在 mainNavigation:

中查找 class
#mainNavigation .navbar-header {

您将能够调整导航栏的大小以适应徽标，请参阅更新的 jsfiddle： http://jsfiddle.net/pkcwtone/4/

徽标图像隐藏和文本头顶徽标

logo image hidden and text overhead logo

html

css

navigation