Question

我正在尝试在导航栏标签旁边放置一个徽标。当我的img和navbar嵌套在标头标签内时，我能够让它工作。然而，我的导航栏在嵌套时会失去其响应能力，但如果我没有嵌套它们，那么当在大屏幕导航栏和徽标位于不同的角落时，会对浮动属性执行操作。然而，在较小的屏幕上，导航栏被推到徽标后面，导航栏按照屏幕变小的方式运行。 <header>标签没有响应，或者有更好的方式来获得我想要的东西吗？我使用的是Dreamweaver cc15 bootstrap。

这是我现在拥有的代码，因为它的工作方式我想要的;减去责备。

<header>
  <div class="header-wrap">
    <div class="inner">
    <a href="home.html" id="logo">atlanteacademy.com</a>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="home.html">HOME</a></li>
          <li role="presentation"><a href="news.html">NEWS</a></li>
          <li role="presentation"><a href="tournament.html">TOURNAMENT</a></li>
          <li role="presentation"><a href="aboutus.html">ABOUT US</a></li>
        </ul>
  </div>
</div>
</header>

这是CSS代码，它也有助于使它做我想要的。

.container header .header-wrap {
    position:relative;
    z-index: 100;
    width:auto;
    height: 150;
}
header .header-wrap .inner {
    width: 936px;
}
.inner{
    position:relative;
    margin: 0 auto;
}


.header-wrap .inner #logo {
    position: absolute;
    display: block;
    white-space: nowrap;
    font-size: 0;
    width: 155px;
    height: 134px;
    background: url(../images/atlantefc.png) 0 0 no-repeat;
    float: left;

}
.header-wrap .inner .nav.nav-tabs {
    width: 781px;
    height: 134px;
    max-width: 100%;
    float: right;
    color: #0810A3;
    font-family: kelly-slab;
    font-style: normal;
    /* [disabled]font-weight: 400; */
    font-size: 1.2em;
    background-color: #FFF;
}



.container .nav.nav-tabs .active a {
    color: #EE0201;
    background-color: #BDBABA;
}

感谢您的帮助和时间。

标题标记<header>是否响应？

0 个答案: