用于响应式网站的流体水平导航栏

Question

我正在尝试制作一个包含水平导航栏的流体响应式网络，我的问题是在浏览器窗口的某个宽度处，栏的元素开始相互重定位，有什么办法可以避免这种情况行为以使导航栏仅伸展到某个媒体查询断点。我需要网站在未激活查询的范围内看起来至少体面。

目前情况如下： http://wearehellyeah.com/test/home_formacio.html

<div class="barra">
            <!--Menu Principal-->
            <nav class="menu-principal">
                <ul class="menu">
                    <li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
                    <li class="item"><a href="#">Actualitat</a></li>
                    <li class="item"><a href="#">Activitat de l'oficina</a></li>
                    <li class="item"><a href="#">Vocalies</a></li>
                    <li class="item"><a href="#">Formació</a></li>
                    <li class="item"><a href="#">Serveis</a></li>
                    <li class="item"><a href="#">Actualitat</a></li>
                    <li class="item no-border"><a href="#" class="no-border">El Col-legi</a></li>
                    <li class="item home"><a href="#" class="no-border">Marcar com pàgina d'inici</a></li>
                    <li class="item conectados">Conectados 103</li>
                    <li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
                </ul>
            </nav>
            <!--Fin Menu Principal-->
            <!--Input buscador-->
            <div class="buscador">
                <form action="">
                    <input type="text" id="ip-search">
                </form>
            </div>
            <!--Fin de Input Buscador-->
</div>

CSS：

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

Answer 1

你可以添加一个最小宽度：

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

这样就不会互相叠加了。但是导航栏上的选项太多了，当它进入移动媒体查询范围时，您可能希望将其设置为下拉框。 例如http://vagish.com（当你缩小浏览器宽度时，它会改变导航栏）

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

这会起作用（连同上面的 CSS）：

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