如何使浮动导航栏的宽度与网站的其余部分流畅地运行？答案

【问题标题】：How can I make a floating nav-bar's width act fluidly with the rest of the website?如何使浮动导航栏的宽度与网站的其余部分流畅地运行？
【发布时间】：2012-05-29 07:38:30
【问题描述】：

我正在基于1140 CSS Grid 构建一个网站，这是一个完全流动的网格，最大宽度设置为 1140 像素。我已经在该层上放置了将要成为导航栏的内容，该导航栏在每侧进一步延伸 5 个像素（对于每个人最喜欢的“丝带”设计效果），并且希望中间的 1140 像素（现在的 1150 像素导航）可以调整宽度与它下面的网格。然而，到目前为止我所尝试的一切都没有奏效。有人有什么想法吗？

HTML：

<div class="float">
<div class="nav">
    <div class="navleft">
    <img src="images/banneredgel.png"/>
    </div>
    <div class="navbar">
    </div>
    <div class="navright">
    <img src="images/banneredger.png"/>
    </div>
</div>
</div>

CSS：

.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}

.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.navleft {
float: left;
width: 5px;
height: 43px;
}

.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}

.navright {
float: left;
width: 5px;
height: 43px;
}

【问题讨论】：

标签： css html media-queries fluid-layout

【解决方案1】：

我用你的答案创建了一个 JS fiddle。 http://jsfiddle.net/thinkingsites/Vz4TC/3/

您的问题是宽度 100% 不允许侧面的两位，因此当您的页面缩小时，它会包裹 .nav 的子项

我所做的是将它们绝对定位在 .nav 中，并给 .navbar 一个左右边距以允许色带而不将其设置为 width:100%，因为这会将色带推开。我还将 .nav 的最大宽度设置为 800，并且导航永远不会超出此范围。

【讨论】：

我实现了您的代码，但仍然存在问题，因为导航栏会不断向右延伸，不会保持在 100% 的范围内，也不会与网站的其余部分一起正常缩放，而是以不同的速度。不过，我又修改了一些，发现了一些可行的方法。谢谢你的帮助，你无疑帮助我走得更近了。
栏是否在小提琴上展开？你把它放在你的演示网站上了吗？

【解决方案2】：

我能够使用 Thinking Sites 提供的代码并对其进行多行修改，以便在宽度小于浏览器（边缘上的丝带）时悬停在中心上方，然后变成当网站流畅地调整到较小的浏览器宽度时显示栏。

HTML：

<div class="float">

        <div class="navleft">
        <img src="images/banneredgel.png">
        </div>

        <div class="navbar">
        <img src="images/logo.png" class="logo"/>
        </div>

        <div class="navright">
        <img src="images/banneredger.png">
        </div>
</div>

CSS：

.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}

.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}

.navright,.navleft { 
width: 5px; 
height: 43px;
position: absolute;
top: 0px;
}

.navleft{
left: -5px;
}

.navright{
right: -5px;
}

【讨论】：