Question

我正在构建一个基于1140 CSS Grid的网站，这是一个完全流畅的网格，最大宽度为1140像素。我已经在这一层上铺设了导航条，每一侧都延伸了五个像素（对于每个人最喜欢的＆＃39;功能区＆＃39;设计效果），并希望中间的1140px（现在1150px导航）调整宽度以及它下面的网格。然而，到目前为止我所尝试的一切都没有奏效。有人有什么想法吗？

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;
}

Answer 1

我用你的答案创造了一个JS小提琴。 http://jsfiddle.net/thinkingsites/Vz4TC/3/

您的问题是宽度100％不允许侧面的两位，所以当您的页面缩小时，它会包装.nav的子项

我所做的是将它们绝对放在.nav中，然后给.navbar一个左右边距以允许没有将它设置为宽度的条带：100％，因为这会将色带推开。我还将.nav的最大宽度设置为800，导航从未扩展到超出该范围。

Answer 2

我能够使用思维网站提供的代码并将其更改为多条线以便在宽度小于浏览器（边缘上的条带）的同时获得悬停在中心上的内容然后变成当网站流畅地调整到较小的浏览器宽度时，栏。

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;
}

如何使浮动导航栏的宽度与网站的其他部分一起流畅？

2 个答案: