Responsive design 用于快速响应网站的流体水平导航栏

我正在尝试制作一个包含水平导航条的流体响应web，我的问题是，在浏览器窗口的某个宽度处，导航条的元素开始相互重新定位，有没有办法避免这种行为，以使导航条刚好拉伸到某个媒体查询断点。我需要在网站上寻找所有最不体面的范围内查询未激活

以下是到目前为止的情况：

---

您可以添加最小宽度：

.menu-principal {
    min-width:883px;
}

那它就不会互相重叠了。但是，导航栏上的选项太多，当它进入移动媒体查询范围时，您可能希望将其设置为下拉框。 e、 g.（当浏览器宽度变小时，它会更改导航栏）

您可以在768px和880px之间进行媒体查询，并减少菜单项之间的间距，这样在您点击768px媒体查询之前应该可以使其看起来很好

这将起作用（与上面的CSS一起）：

---

非常感谢@Vagish，我会尝试一下，问题是我只有两种响应设计：一种用于移动设备（320px），其中我有另一个导航栏，只有选项卡按钮，另一个用于表格（768px）但我想做的是让导航栏保持不变，直到它到达768px断点，在那里我激活了我的媒体查询并将导航栏更改为较小的导航栏。我的应对方法是，在调整浏览器窗口大小的任何时候，都要使其看起来相当不错，实际上，这与您在网站上所做的相同。任何其他想法都会非常感激。我已经用更多的CSS代码更新了我的答案，这应该可以解决你的问题。我得到了@Vagish，所以诀窍是每次窗口调整到导航栏元素相互重叠的位置时，都要减少导航栏中的填充，对吗？我将探讨你的技术，并会让你知道，谢谢！基本上，只需要像Firebug（Firefox插件）这样的东西，或者在Chrome上使用Inspect元素并不断修改CSS。我就是这样做的。另外，如果我已经回答了您的问题，您可以按我答案旁边的绿色勾号。：）很抱歉再次打扰您@Vagish。在使用这种方法之后，我开始觉得每次浏览器窗口拉伸10像素时，我都必须进行媒体查询，因为每次窗口在某个点调整大小时，导航栏都会再次将一个元素放在另一个元素之上。是否有任何方法可以制作相对填充，以避免每次调整窗口大小和打断导航栏时都更改它们？

.barra {
background: #00b1da;
width: 100%;
padding: 0;
}

.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}

.menu {
padding: 0;
margin: 0;
}

.menu .item {
float: left;
list-style: none;
}

.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}

.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}

.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}

.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}

.menu-principal {
    min-width:883px;
}

@media all and (max-width: 768px) and (min-width: 880px) {
    .menu-principal {
        padding:0px;
    }
    .menu-med .item a {
        padding:0 .69em;
    }
}