Question

我希望导航栏在横幅上？这可能吗。我一直在做以下的css尝试实现它的工作原理，但它超出了包装器的范围。以下是css：

 .navbar-buttons{
    padding-top:10px;
    padding-right:20px;
    text-align:right;
    list-style:none;
    margin:0 auto;
    overflow:hidden;
    <!---I commented it out because like I mentioned above, goes out of scope--->
    <!---background-image: url(./img/Intranet_Banner.jpg);--->
    width:100%;
}

#wrapper {
    width: 940px;
    height:100%;
    margin: 0 auto;
 }

以下是html页面导航页面：

<div id="wrapper">

<!-- content-wrap starts here -->
<div id="content-wrapper">      

    <img src="img/Banner.jpg" alt="Banner" class="no-border img-banner" />

            <!-- Menu Tabs -->
        <ul>
            <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:blue !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a></li>

        </ul>
</div>

Answer 1

您可以使用background-image属性在background-image上设置#content-wrapper，而不是尝试在.image上移动您的列表。

我对您的代码进行了一些调整：

.navbar-buttons {
  padding-top: 10px;
  padding-right: 20px;
  list-style: none;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}
#content-wrapper {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/93/Long_sky_background_%2B_PAN.jpg');
}
#wrapper {
  width: 940px;
  height: 100%;
  margin: 0 auto;
}
a {
  color: white;
}

<div id="wrapper">

  <!-- content-wrap starts here -->
  <div id="content-wrapper">
    <!-- Menu Tabs -->
    <ul>
      <li class="navbar-buttons"><a href="index.cfm"><span>Home</span></a>&nbsp;<span style="color:white !important">|</span>&nbsp;<a href="Resources.cfm"><span>IT Support</span></a>
      </li>

    </ul>
  </div>

</div>

View on JSFiddle

如何在横幅上获取导航栏？

1 个答案: