导航栏与潜水图像

Question

我真的很难让这个导航菜单中的图像将导航分开工作。响应是一大优点。我不相信当前的代码是正确的方式，所以请开放思考如何处理这个问题。

HTML

<div id="nav">
    <ul class="nav-left">
        <li>1</li>
        <li>2</li>
    </ul>
    <div class="nav-logo"></div>
    <ul class="nav-right">
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS

#nav {
    width: 400px;
    background: #f5f5f5;
    border: 1px solid grey;
    text-align: center;
}
.nav-left, .nav-right, .nav-logo {
    display: inline-block;
    height: 30px;
    vertical-align:bottom;
}
.nav-left {
    background: red;
}
.nav-right {
    background: red;
}
.nav-right, .nav-left {
    width: 100px;
    line-height: 30px;
    padding: 0;
}
.nav-logo {
    background: yellow;
    width: 30px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
}
ul {
    margin: 0;
    text-align: justify;
    list-style: none;
}
li {
    display: inline;
    width: 100%;
}

更新05.05.14 根据要求更新了我当前的代码。

Answer 1

我已经为你做了一个略微敏感的标题：JSfiddle（注意：从谷歌图片搜索借来的随机coffeeshop徽标......我应该去喝杯咖啡）

我们的想法是使用html5 nav元素来包含您的链接，每个链接都带有width:20%，因此它会根据屏幕的宽度调整大小。 图像位于background:url('...') no=repeat center;以避免尺寸问题。它位于一个单独的div中，允许您对<nav>元素进行条带化。这可以通过pure css进行。

由于您希望垂直放置链接，因此它们嵌套在div中，并且使用与链接容器具有相同width:20%;属性的空div来创建图像的空间。

一旦接近小的移动设备宽度（因为链接覆盖图像），设计就会中断。为此，您可以使用@media queries。

我希望这给你一个起点，但设计是非常主观的，有很多不同的方法可以做到这一点。 使用Bootstrap设置页面样式并检查其CSS以查看正在发生的情况可能是值得的。

Answer 2

你能否将你的css和html代码添加到你的qustion中然后我可以帮助你找到最好的解决方案。此外，如果您想通过电子邮件将您的密码发送给我，我会向您发送最佳解决方案。

Orherwise只需在主导航容器.navfix或div上添加一个类ul即可。然后将类z-index:9999999的样式属性.navfix添加到样式表中。此外，如果您使用任何其他div作为背景，那么您必须为导航背景容器添加相同的内容，但此处z-index属性应为负数或低于其他属性。

示例：

.navfix {
  z-index:9999999;
}

用于背景容器（如果有） 那么

.navfix {
  z-index:9999999;
}
.backgrounContainerClassName {
 z-index:-1; 
}